时间戳

首页 > 解决方案 > 如何在 React 中构建私有路由

reactjs - 如何在 React 中构建私有路由

问题描述

我创建了一个 privateRoute 组件，只是为了像这样路由保护我的用户：

export const PrivateRoute = ({ component: Component, ...rest }: any) => {
  const { user } = useAuth();

  return user ? <Route {...rest} /> : <Redirect to={"/login"} />;
};

在我的 App.tsx

<Box h="78vh" as="main" display="flex" alignItems="center" mt={3}>
      <Container maxW="container.lg">
        <Switch>
          <Route component={Home} path="/" exact />
          <PrivateRoute component={Dashboard} path="/dashboard" exact />
          <Route component={Login} path="/login" exact />
          <Route component={Upload} path="/upload" exact />
        </Switch>
      </Container>
    </Box>

公共路线

export const PublicRoute = ({
  component: Component,
  restricted,
  ...rest
}: any) => {
  const { user} = useAuth();
  return (
    <Route
      {...rest}
      render={(props) =>
        user && restricted ? (
          <Redirect to="/login" />
        ) : (
          <Component {...props} />
        )
      }
    />
  );
};

index.tsx [条目]

  <Router>
    <Navbar />
    <App />
    <Footer />
  </Router>

它当我在仪表板上包装我的 PrivateRoute 时，它​​不会重定向到仪表板

标签： reactjs

解决方案

问题是您排除了component道具，只将其余道具传递给Route. 您可以：

  • 保留所有道具并将它们传递给Route：
export const PrivateRoute = (props: any) => {
  const { user } = useAuth();

  return user ? <Route {...props} /> : <Redirect to={"/login"} />;
};
  • 或者传递component你在解构过程中得到的道具：
export const PrivateRoute = ({ component: Component, ...rest }: any) => {
  const { user } = useAuth();

  return user ? <Route component={component} {...rest} /> : <Redirect to={"/login"} />;
};

这实际上取决于您是否想对componentprop 做任何特别的事情，而不是将其传递给Route组件。

推荐阅读