在一个组件中路由，在另一个组件中链接

Question

这听起来像是一个愚蠢的问题，但我找不到任何答案。我在 App.js 上有一个导航栏，在我的反应项目中，我在其中切换组件：

<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>

在我的用户页面上，我想放置一个 Link，基本上可以将我带到 /users/user-1。因此，当我单击 link 而不是我当前所在的 Users 组件时，将呈现 User1 组件。我试过这样：

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

但它不呈现任何内容，它更改了 url 但组件仍然是用户。

另外作为旁注，我的用户组件在我的 App.js 中与导航栏

一起被调用

Answer 1

（假设您使用的是 react-router-dom）

这是因为 URL users/user-1 匹配第一个 <Route /> 路径。它匹配 /users。如果您希望 /users 仅在 /users 上呈现而不在 /users/something 上呈现，那么您必须添加 exact prop.

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

查看文档：https://reacttraining.com/react-router/web/api/Route/exact-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>

在一个组件中路由，在另一个组件中链接

Routing in one component, links in another

router

reactjs