反应私有路由导致无限循环

Question

我的反应路由器在满足专用路由中的第二个条件时产生无限循环。 当不满足此故障条件时，专用路由的其余部分工作正常。无论我尝试将其重定向到什么路线，都会发生这种情况。所以我确定这不是使用效果问题。请问是什么原因造成的？

故障状态：

else if (user && user.interests === false ) {
return (<Navigate to="/profile"/>)
}

私人路线：

const PrivateRoute = ({children, ...rest}) => {

let {user} = useContext(AuthContext)
console.log(user.interests)

if (!user){
return(
<Navigate to="/" />
)
}
else if (user && user.interests === false ) {
return (<Navigate to="/profile"/>)
}
else {
return (<Outlet/>)
}

应用.js

function App() {
return (
<Router>
<AuthProvider>
<Routes>
<Route path="/" exact element={<LandingPage/>}></Route>
<Route exact path='/home' element={<PrivateRoute/>}>
<Route exact path='/home' element={<HomePage/>}/>
</Route>
<Route exact path='/profile' element={<PrivateRoute/>}>
<Route path="/profile" exact element={<ProfileCard/>}></Route>
</Route>
<Route exact path='/map' element={<PrivateRoute/>}>
<Route path="/map" exact element={<Home/>}></Route>
</Route>
</Routes>

</AuthProvider>
</Router>
);
}

Answer 1

无限重定向正在发生，因为您在"/profile"路由中使用PrivateRoute并且它继续匹配您的第二个条件。我建议您查看 React Router 文档中的身份验证示例。