为什么React Router无法在嵌套设置中再次呈现先前的链接？

Question

我正在为我所在的社区使用React / React Router制作的用户列表项目，并且遇到了无法找到根源的问题。

我设置了一个嵌套路由器，要在单击按钮（网址/播放器）时出现一个用户列表，然后在用户列表中单击该名称时要显示该用户的个人资料（网址/玩家/：id）。到目前为止，一切正常！

但是： 当我进入用户个人资料（url / player /：id）并单击链接返回到用户列表时，它不会呈现用户列表组件-尽管浏览器本身的url更改回（url / player ）。

我不知道如何再次显示一般用户列表，一定会感谢您的投入。

由于该项目包含多个组件，因此我将它们分为不同的文件，这是我的问题所在。

我仍然尝试为嵌套路线重构不同教程的说明。也许我只是忽略了一些基本知识，但似乎找不到它。

位于index.js中的主导航路由器

<Router>
  <Navigation />
  <div className="contentBox">
    <Route path="/" exact component={Home} />
    <Route path="/player" exact component={Playerlist} />
  </div>
</Router>;

播放器列表组件中的用户列表路由器

<Router>
  <Route path="/player" exact component={Playerlist} />
  <Route path="/player/:id" component={Playerprofile} />
</Router>;

奇怪的是，只有Playerlist-Link不再起作用。如果我单击“主页”-链接或任何其他导航，则它将起作用。因此，我认为这与重新渲染有关。

很抱歉，这个问题似乎很明显，我仍然是初学者，感谢您的帮助！谢谢！

Answer 1

您应该改善应用的嵌套路由：

1. 无需用PlayerList包装Router组件。仅在根组件中使用Router。
2. 请勿在组件本身内使用到PlayerList组件的路由。
3. 请在 index.js 中使用Route来PlayerList组件，但不要使用exact（因此路由到' / player /：id < / em>的路线有效）。

以下是更新代码段：

App.js （在您的情况下为 index.js ）：

export default function App() {
  return (
    <Router>
      <Navigation />
      <Route path="/" exact component={ Home } />
      <Route path="/player" component={ PlayerList } />
    </Router>
  );
}

PlayerList.js

export default function PlayerList({ match }) {
  return (
    <div>
      <h1>Player List</h1>
      <Route path={`${match.path}/:id`} component={ PlayerProfile } />
    </div>
  );
}

PlayerProfile.js

export default function PlayerProfile({ match }) {
  return <div>Player Profile { match.params.id }</div>;
}

Navigation.js （草稿）：

export default function Navigation() {
  return <nav>
    <Link to="/">Home</Link>
    <Link to="/player">PlayerList</Link>
    <Link to="/player/1">Player 1</Link>
    <Link to="/player/2">Player 2</Link>
    <Link to="/player/3">Player 3</Link>
  </nav>;
}

尽管我建议将“ / player /：id ”的链接移到PlayerList组件中。

您可以找到有关嵌套路由here的正式说明。希望有帮助。