一个组件的路由，另一个组件的链接

Question

这可能听起来像一个愚蠢的问题，但我找不到任何答案。我在App.js上有一个导航栏，在我的react项目上，我在组件之间切换。

<Router>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
    </nav>
    <Switch>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/users">
        <Users />
      </Route>
      <Route path="/">
        <Home />
      </Route>
      <Route path="/users/user1">
        <User1 />
      </Route>
    </Switch>
  </div>
</Router>

在我的用户页面上，我想放一个链接，带我去用户用户-1。所以，当我点击那个链接，而不是我当前所在的Users组件，来渲染User1组件。我试着这样做。

<Link to='/users/user1'>User 1</Link>

但它没有呈现任何东西，它改变了url，但组件仍然是Users.

还有一点，我的Users组件在我的App.js中和导航条一起被调用。

Answer 1

(假设你使用的是 react-router-dom)

这是因为URL users/user-1 吻合 <Route /> 路径。它与 /users. 如果你想 /users 只在 /users 而不在 /users/something 然后你必须添加 exact 支持。

<Route exact path="/users">
  <Users />
</Route>

参见文档。https:/reacttraining.comreact-routerwebapiRouteexact-bool。

有多个可能的途径匹配的例子。

<Switch>
  <Route path="/about">
    <About />
  </Route>
  <Route exact path="/users">
    <Users />
  </Route>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/users/user1">
    <User1 />
  </Route>
</Switch>