我在标题中创建了一个nav,但当我单击链接时,它会在同一标题中呈现组件。所以我想把它渲染到标题下。实现这一目标的正确方法是什么?
import React, { Component } from "react";
import Nav from "./Nav";
import Home from "./Home";
import About from "./About";
import Events from "./Events";
var ReactRouter = require("react-router-dom");
var Router = ReactRouter.BrowserRouter;
var Route = ReactRouter.Route;
var Switch = ReactRouter.Switch;
class Header extends Component {
render() {
return (
<div className="header">
<img src={require("./img/logo.png")} className="logo" alt="Logo" />
<Router>
<div className="container">
<Nav />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/events" component={Events} />
<Route
render={function() {
return <p>Not Found</p>;
}}
/>
</Switch>
</div>
</Router>
</div>
);
}
}
export default Header;
发布于 2019-02-19 04:01:18
路由在标头中呈现,因为您将其放在<div className="header"></div>
标记之间。
将代码编辑为如下所示:
// Imports
class Header extends Component {
render() {
return (
<React.Fragment>
<div className="header">
<img src={require("./img/logo.png")} className="logo" alt="Logo" />
<Nav />
</div>
<Router>
<div className="container">
<Switch>
// Routes...
</Switch>
</div>
</Router>
</React.Fragment>
);
}
}
https://stackoverflow.com/questions/54754048
复制相似问题