Question

请参阅sandbox。

我有这个代码：

    <Router history={createBrowserHistory()}>
      <Switch>
        <Route path="/items/:itemId">
          <Item />
        </Route>
        <Route exact path="/items">
          <Items />
        </Route>
        <Redirect to="/items" />
      </Switch>
    </Router>

期望 /items 是默认路由。 Items 正在加载可用项目的链接：

  const { url } = useRouteMatch();

  return (
    <div>
      <h1>Items</h1>
      {items.map((item) => (
        <Link to={`${url}/${item}`}>{item}</Link>
      ))}
    </div>
  );

点击项目链接后，我希望 URL 中包含该项目，并呈现 Item。 url 是 /items，因此 Switch 的所有内容都应该可以呈现：

        <Route path="/items/:itemId">
          <Item />
        </Route>

然而，它停留在 /items，甚至不再渲染 Items 组件。没有显示错误。知道为什么会这样吗？

Answer 1

对于路由器，您缺少一个 exact 道具，这对您的情况非常重要

<Route exact path="/items/:itemId" />

并且在您的 Item 组件中，您拼错了 param 名称，因为在路由器中它是 itemId，其中组件具有不同的 item，因此修复它将使参数可访问（它们应该完全匹配）

export const Item = () => {
  const { itemId } = useParams();

  return (
    <div>
      <h1>Item</h1>
      {itemId}
    </div>
  );
};

Answer 2

那是因为当它到达 /items/:itemId 页面时，组件会重定向回 /items ，所以解决方案就是删除重定向组件

  <Switch>
    <Route path="/items/:itemId">
      <Item />
    </Route>
    <Route exact path="/items">
      <Items />
    </Route>
  </Switch>

还有我在你的代码中看到的其他一些错误。在 Item.jsx 中，你使用

  const { item } = useParams();

这不会渲染任何东西，因为它是 undefined ，那是因为您在 Route 中传递了 /:itemId 。所以试试这个

  const { itemId:item } = useParams();

这里我们将 itemId 重命名为 item，以便在代码中向下访问。

反应路由器链接不重定向

2 个答案: