我想限制用户登录时的页面路由

Question

我做了一个应用程序，我使用react-router-dom实现路由。

所以这个场景是当用户登录时，他被重定向到localhost:3000/homeUrl和主页正在被渲染。当他退出登录时，他将进入登陆页面，位于localhost:3000.

但是如果用户将url更改为localhost:3000当登录时，一切都是空白的，他显示为登录，我相信这是路由的默认行为。

要求是，将用户重定向到主页，直到他登录，即使他通过输入localhost更改url在浏览器中。

Answer 1

添加一个条件来检查用户是否登录，并使用Navigate from react-router-dom来重定向用户。将它添加到组件

中

return (
{ ("add condition here to check if user is login") ? (
<Navigate to="/home " />
) : (<div>Component body</div>)
}
)

Answer 2

尝试，如果没有登录，则重定向到登录页面，然后登录用户重定向到登录页面。

<HashRouter>
{!auth.token && (
<Routes>
<Route path="/" element={<Login />} />
<Route path="*" element={<Navigate to="/" />} />
</Routes>
)}
{auth.token && (
<>
<Routes>
<Route exact path="/home" element={<Home />} />
<Route path="*" element={<Navigate to="/home" />} />
</Routes>
</>
)}
</HashRouter>

Answer 3

你好，你的问题很容易解决，只要这样构建你的路由:

<Route
exact
path="/login"
render={() => {
if (userLoggedIn) {
return <Redirect to="/home" />;
} 
return <LoginPage />; 
}}
/>

或者这样做:

<Route
exact
path="/home"
render={() => {
if (!userLoggedIn) {
return <Redirect to="/login" />;
} 
return <HomePage/>; 
}}
/>

我希望这对你有所帮助，如果你需要任何其他澄清，请在下面的评论中提到我