Question

我正在使用 HashRouter 来呈现不同的页面。我遇到的问题是，当我访问 /service/app/sort，当我期望它呈现 <MainPage /> 时它呈现 <ChildPage />。

这类似于我的路由器的样子

    <HashRouter>
      <Switch>
        <Route path="/service/app">
          <MainPage />
        </Route>
        <Route path="/service/app/sort">
          <ChildPage />
        </Route>
      </Switch>
    </HashRouter>

可能有帮助的其他信息：

在我的 <MainPage /> 上，我有一个按钮可以重定向 onClick

  const history = useHistory();

  const handleSortClick = () => {
    console.log('click me')
    let path = "/service/app/sort";
    history.push(path);
  };

当我单击它一次时，我得到“单击我”console.log 并且链接更改为 /service/app/sort，但它仍然是 <MainPage />。如果我再点击一次，我会收到警告

“警告：哈希历史不能推送相同的路径；新条目不会被添加到历史堆栈中”

Answer 1

您可能面临这个问题，因为 URL 的开头被 react-router-dom 解释为真，并且允许您访问 /service/app。

例如，/service/app 路由不仅会检测此路由，还会检测 /service/app/1 或 /service/app1，因为它的路径中有 /service/app。

为了防止这种情况，您需要将 exact 属性传递给路由，因此 react-router 会理解您需要准确访问此路由以呈现该组件。

<Route path="/service/app" exact={true}>
  <MainPage />
</Route>

反应路由器渲染错误的组件

1 个答案: