一个很常见的需求:有些路由,需要登录才能访问,不登陆的情况下访问它就跳转到登录页面。这里就用 Context 来实现路由鉴权。
react-router v6稳定版出来了,有许多改变,以前拦截路由的方式也用不成了。在世界之外遨游了好久终于找到了一篇文章,学废了!整理学习一下分享出来。
index.js 如下,路由写在了这里面:
import { AuthProvider, RequireAuth } from './Auth.js'
ReactDOM.render(
<HashRouter>
<AuthProvider>
<Routes>
<Route path="/" element={<App />}> // 嵌套路由
<Route path="user" element={<User />} />
<Route path="upload" element={
<RequireAuth> // 封装的拦截组件,已登录则返回它children组件,未登录则导航到登录页
<MovieUpload /> // 需要登录才能使用的组件
</RequireAuth>
}
/>
</Route>
</Routes>
</AuthProvider>
</HashRouter>,
document.getElementById('root