[英]React-router-dom v4, links in NavBar but routing in App.js
I have a problem with react-router-dom v4 我对react-router-dom v4有问题
When I click on Home / contact links In App.js it's working great, redirect to correct path. 当我单击App.js中的“主页/联系人”链接时,它运行良好,请重定向到正确的路径。
But when I click on NavBar links (NavLink to="") it change path but not rendering new component 但是,当我单击NavBar链接(NavLink =“ =”)时,它会更改路径,但不会呈现新组件
How to force NavLink to rerender new component on click? 如何强制NavLink单击以重新呈现新组件?
App.js 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 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 index.js
render(<App />, document.getElementById('root'));
registerServiceWorker();
You have two instances of <Router />
, 1st in App.js
and 2nd in NavBar.js
. 您有两个 <Router />
实例 ,第一个在App.js
,第二个在NavBar.js
。
You should have only one instance of Router in your application in this case. 在这种情况下,您的应用程序中应该只有一个Router实例。
<Router />
from NavBar.js
1从NavBar.js
删除多余的<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;
<Router />
direct descendant in App.js
, like: 2将<Router />
成为App.js
直接后代,例如: 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;
I created a demo based on your code to replicate this issue. 我根据您的代码创建了一个演示来复制此问题。 You can see that when you click inside <Articles />
links, <NavLink />
inside the <Navbar />
component are not active even if url in the browser is changed. 您可以看到,当您单击<Articles />
链接内部时,即使更改了浏览器中的url,在<Navbar />
组件内的<Navbar />
<NavLink />
也不处于活动状态。
If you click on a link inside <Navbar />
, <NavLink />
is active but content is no more rendered in <Articles />
component because we have two instances of BrowserRouter
. 如果单击<Navbar />
内的链接,则<NavLink />
处于活动状态,但是<Articles />
组件中不再呈现内容,因为我们有两个BrowserRouter
实例。
Demo: https://codesandbox.io/s/lwqBO6r5 演示: https : //codesandbox.io/s/lwqBO6r5
Fixed demo (with one BrowserRouter): https://codesandbox.io/s/xkj1xKO6r 固定演示(带有一个BrowserRouter): https ://codesandbox.io/s/xkj1xKO6r
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.