React-router-dom v4，在 NavBar 中链接但在 App.js 中路由

Question

我对 react-router-dom v4

有问题

当我点击 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();

Answer 1

您有 <Router /> 的两个实例，第一个在 App.js 中，第二个在 NavBar.js 中。

在这种情况下，您的应用程序中应该只有一个 Router 实例。

1 从 `NavBar.js`

中删除多余的 <Router />

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 在 `App.js` 中创建 `<Router />` 直系后代，如：

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 /> links 里面点击时，<Navbar /> 组件里面的 <NavLink /> 没有激活，即使浏览器中的 url 改变了。

如果您单击 <Navbar /> 中的 link，<NavLink /> 处于活动状态但内容不再呈现在 <Articles /> 组件中，因为我们有两个 BrowserRouter.

演示： https://codesandbox.io/s/lwqBO6r5

固定演示（使用一个 BrowserRouter）： https://codesandbox.io/s/xkj1xKO6r

React-router-dom v4，在 NavBar 中链接但在 App.js 中路由

React-router-dom v4, links in NavBar but routing in App.js

javascript

routing

url-routing

reactjs

react-router

1 从 `NavBar.js`

2 在 `App.js` 中创建 `<Router />` 直系后代，如：

React-router-dom v4，在 NavBar 中链接但在 App.js 中路由

React-router-dom v4, links in NavBar but routing in App.js

javascript

routing

url-routing

reactjs

react-router

1 从 NavBar.js

2 在 App.js 中创建 <Router /> 直系后代，如：

1 从 `NavBar.js`

2 在 `App.js` 中创建 `<Router />` 直系后代，如：