我有react-router-dom v4的问题
当我点击Home / contact链接在App.js中它工作得很好,重定向到正确的路径 .
但是,当我单击NavBar链接(NavLink to =“”)时,它会更改路径但不会渲染新组件
如何强制NavLink在点击时重新渲染新组件?
App.js
export const App = () => {
return(
<div className="App">
<NavBar />
<div className='text-center'>
<div className='children'>
<Router>
<div className="container">
<Link to="/">Home</Link>
<Link to= "/contact">Contact</Link>
<Link to= "/terms">Terms</Link>
<Route exact path= "/" component={Home} />
<Route path= "/contact" component={Contact} />
<Route path= "/terms" component={Terms} />
</div>
</Router>
</div>
<Footer />
</div>
</div>
);}
export default App;
NavBar.js
class NavBar extends React.Component {
render () {
return (
<nav className="navbar navbar-default horizontal-navbar">
<a className="navbar-brand" href="#">
<img className='horizontal-navbar-logo' src={Job2PersonLogo} />
</a>
<div className="links-navbar-div">
<Router>
<div className="btn-nav">
<ul className="nav navbar-nav navbar-right">
<li><NavLink to="/">Add Job</NavLink></li>
<li><NavLink to= "/#search">Search</NavLink></li>
<li><a href="/#how-it-works">How It Works</a></li>
<li><NavLink to= "/sign-in">Sign In</NavLink></li>
<li><NavLink to="/sing-up">Sign Up</NavLink></li>
</ul>
</div>
</Router>
</div>
</nav>
)}}
export default NavBar;
index.js
render(<App />, document.getElementById('root'));
registerServiceWorker();
1 回答
您有
<Router />
的两个实例,App.js
中的第一个实例和NavBar.js
中的第二个实例 .You should have only one instance of Router in your application in this case.
1从NavBar.js中删除额外的<Router />
NavBar.js
2在App.js中创建<Router />直接后代,如:
App.js
我根据您的代码创建了一个演示来复制此问题 . 您可以看到,当您单击
<Articles />
链接内部时,即使浏览器中的URL已更改,<Navbar />
组件内的<NavLink />
也不会处于活动状态 .如果单击
<Navbar />
内的链接,则<NavLink />
处于活动状态,但<Articles />
组件中不再呈现内容,因为我们有两个BrowserRouter
实例 .Demo: https://codesandbox.io/s/lwqBO6r5
Fixed demo (with one BrowserRouter): https://codesandbox.io/s/xkj1xKO6r