React Switch 总是去第一条路线

Question

如果我点击“/”或“/reset_password”或任何其他路由，PurelyUnauthenticatedRoutes 中的第一个组件总是会被调用，即带有消息 ROUTE_CONSTANTS.RESET_PASSWORD 的 PublicRoute

<Router>
         <Switch>
           <PurelyUnauthenticatedRoutes />
           <PublicRoute key={1} redirect={false} path="/" component={CheckAuthenticatedRoutes} />
         </Switch>
     </Router>

const PurelyUnauthenticatedRoutes = (props) => {
  return [
    <PublicRoute
      {...props}
      key={"/reset_password"}
      redirect={false}
      path={"/reset_password"}
      render={(routeProps) => <div>{ROUTE_CONSTANTS.RESET_PASSWORD}</div>}
    />,
  ];
};

const PublicRoute = (props) => {

  const { userAuthenticationDetails, redirect } = props;

  const isLoggedIn = (userAuthenticationDetails && userAuthenticationDetails.isLoggedIn) || false;
  if (isLoggedIn && redirect) {
    return <Redirect to={"/dashboard"} />;
  }
  return <Route {...props} />;
};

export default PublicRoute;

Answer 1

这是您的PurelyUnauthenticatedRoutes 组件上的return 语句执行此操作。您正在返回一个 PublicRoute 组件数组。 React 不知道如何正确渲染它。相反，您应该将多个路由作为 Switch 组件的子级返回。

在Router 中有多个Switch 语句很好。所有Route 组件都必须是Switch 的直接子级（除非您要渲染多个Routes）。

您确实需要弄清楚您的匹配条件，因为Router 顶层的Switch 意味着流量将流向PurelyUnauthenticatedRoutes 或PublicRoute - 而不是两者。目前所有流量都由PurelyUnauthenticatedRoutes 处理，因此PublicRoute 组件与key={1} 永远不会显示。

const PurelyUnauthenticatedRoutes = (props) => {
  return (
    <Switch>
      <PublicRoute
        {...props}
        key={"/reset_password"}
        redirect={false}
        path={"/reset_password"}
        render={(routeProps) => <div>{ROUTE_CONSTANTS.RESET_PASSWORD}</div>}
      />
    </Switch>
  );
};

注意：当您在 App 中使用 props 时，您当前没有使用任何 props 调用它，因此您实际上不需要接受或传递该 props 对象，如果您不这样做想要。