我对react-router-dom v4有问题
当我单击App.js中的Home / contact链接时,它的工作非常好,请重定向到正确的路径。
但是,当我单击NavBar链接(NavLink =“=”)时,它会更改路径,但不会呈现新组件
如何强制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();
最佳答案
您有<Router />
的两个实例,App.js
中的第一个实例,NavBar.js
中的第二个实例。
在这种情况下,您的应用程序中应该只有一个Router实例。
1从<Router />
中删除多余的NavBar.js
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">
<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>
</div>
</nav>
);
}
}
export default NavBar;
2使
<Router />
直接成为App.js
的后代,例如:App.js
export const App = () =>
<Router>
<div className="App">
<NavBar />
<div className="text-center">
<div className="children">
<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>
</div>
<Footer />
</div>
</div>
</Router>;
export default App;
我根据您的代码创建了一个演示来复制此问题。您可以看到,当您单击
<Articles />
链接内部时,即使更改了浏览器中的url,<NavLink />
组件内的<Navbar />
也不处于 Activity 状态。如果单击
<Navbar />
内的链接,则<NavLink />
处于 Activity 状态,但不再在<Articles />
组件中呈现内容,因为我们有BrowserRouter
的两个实例。演示: https://codesandbox.io/s/lwqBO6r5
固定演示(带有一个BrowserRouter): https://codesandbox.io/s/xkj1xKO6r
关于javascript - React-router-dom v4,在NavBar中进行链接,但在App.js中进行路由,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45504998/