当我在 url reactjs 中更改我的查询参数时，为什么路由器将我导航到主页

Question

我使用 React Router V5。

我已经使用 url 参数实现了 React 分页。

我在 url 中更改查询参数时遇到问题，然后路由器重定向到主页。

你能告诉我我的路线有什么问题吗？

export const AppRoutes = () => {
  const { currentUser } = useAuth();
  return (
    <Switch>
      {!currentUser.isLoggedIn && <Route path={AppRoute.login} component={Login} />}
      <Layout>
        <Route exact path='/' component={Home} />
        <Redirect to='/' />
      </Layout>
    </Switch>

当我评论重定向行时，我的参数分页工作正常。

Answer 1

当 path={AppRoute.login} 路径不匹配并由 Switch 组件呈现时整个 Layout 组件被渲染，然后内部的所有路由包括匹配和渲染，就像它们在任何 [=12 外部的路由器中一样=] 组件.

换句话说，Redirect 始终匹配并呈现，无条件重定向到 "/"。

您可以在另一个 Switch 中渲染嵌套路由，因此 排他性 路由匹配和渲染发生：

export const AppRoutes = () => {
  const { currentUser } = useAuth();
  return (
    <Switch>
      {!currentUser.isLoggedIn && <Route path={AppRoute.login} component={Login} />}
      <Layout>
        <Switch>
          <Route exact path='/' component={Home} />
          <Redirect to='/' />
        </Switch>
      </Layout>
    </Switch>
  );
};

当我在 url reactjs 中更改我的查询参数时，为什么路由器将我导航到主页

Why router navigates me into homepage when i'm changing my query params in url reactjs

reactjs

react-router