跳到主要内容

react-router v6 简单路由拦截跳转到登录

· 阅读需 1 分钟
Hanasaki

非常简单的路由拦截,使用localstorage储存登录状态,写一个拦截组件,由他根据登录状态来判断是否跳转到登录。

import React from 'react'
import { Navigate } from 'react-router-dom'

// RequireAuth 组件相当于一个拦截器,是否返回被拦截的组件要听他的
function RequireAuth({ children }) {
const authed = localStorage.getItem('login')

return authed === 'true' ? ( // 判断 localstorage 中登录状态是否为 true
children
) : (
<Navigate to="/user" replace /> // 跳转到登录
);
}

ReactDOM.render(
<HashRouter>
<Routes>
<Route path="/" element={<App />}> // 路由嵌套
<Route path="user" element={<User />} />
<Route path="upload" element={
<RequireAuth> // 拦截组件
<MovieUpload /> // 被拦截组件
</RequireAuth>
}
/>
</Route>
</Routes>
</HashRouter>,
document.getElementById('root')
);

一个非常基础的路由拦截就实现了。