React Router在nav外部渲染组件
React Router在nav外部渲染组件
提问于 2019-02-19 03:25:14
我在标题中创建了一个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;回答 1
Stack Overflow用户
发布于 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>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54754048
复制相关文章
相似问题