如何将受保护的路由与 react-router-dom V6 和 typescript 一起使用？

Question

我正在尝试实现一个受保护的路由，只允许登录用户访问我的应用程序。我编写的代码似乎有效，当我尝试在未登录的情况下访问主页时，我被重定向到我的登录页面，但是一旦我登录我就可以访问该页面但我没有呈现并且我收到以下错误: Click here for error

我尝试了多种方法，将元素包装在我的受保护路由中似乎是 V6 的处理方式，但它似乎对我不起作用：

我的保护路线

interface PrivateRouteProps extends RouteProps {
}

const PrivateRoute: React.FC<PrivateRouteProps> = ({...rest}) => {
    const auth = useAuth();

    if (auth?.user === null) {
        return <Navigate to='/'/>;
    }
    return <Route {...rest}/>;
};

export default PrivateRoute;

我的应用程序（路线使用情况）

function App() {
    useEffect(() => {
      API
        .get('api', '/reservation', {})
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error.response);
        });

    }, [])
    return (
      <Router>
        <Routes>
          <Route path='/' element={<LoginPage />}/>
          <Route path='/consultAndReserve' element={<PrivateRoute><Navbar/><ConsultReserve/></PrivateRoute>} />
          <Route path='/consultAndReserve/:date' element={<><Navbar/><ConsultReserveWithDate/></>}/>
          <Route path='/myReservations'  element={<><Navbar/><Reservations/></>}/>
          <Route path='/tracing'  element={<><Navbar/><Tracing/></>}/>
        </Routes>
      </Router>
  );
}

我做错了什么？

Answer 1

即使在 TypeScript 中，创建“PrivateRoute”组件也相当简单。

在您的情况下，您不能像错误指出的那样直接呈现 Route 组件。这是 RRDv5 和 RRDv6 之间的重大变化。您可以渲染 children 属性，因为您直接包装了要保护的组件。

示例：

const PrivateWrapper = ({ children }: { children: JSX.Element }) => {
  const auth = useAuth();
  return auth?.user ? children : <Navigate to="/" replace />;
};

用法：

<Routes>
  ...
  <Route
    path="/consoleAndReserve"
    element={(
      <PrivateWrapper>
        <Navbar />
        <ConsultReserve />
      </PrivateWrapper>
    )}
  />
  ...
</Routes>

如何将受保护的路由与 react-router-dom V6 和 typescript 一起使用？

How to use Protected Routes with react-router-dom V6 and typescript?

typescript

reactjs

react-router-dom