如何将Protected Routes与react router dom V6和typescript一起使用

Question

我正在尝试实现一个受保护的路由，只允许登录的用户访问我的应用程序。我写的代码似乎可以工作，当我尝试在没有登录的情况下访问主页时，我会重定向到我的登录页面，但是一旦我登录，我就可以访问该页面，但我没有呈现，我得到以下错误：点击此处查看错误

我尝试了多种方法，将元素包装在受保护的路由中似乎是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

创建一个"PrivateRoute"；组件，甚至在TypeScript中也是如此。

在您的情况下，您无法直接渲染错误所指出的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>