React-router V6路由守卫

最新推荐文章于 2024-05-27 19:31:03 发布

十忽为秒

最新推荐文章于 2024-05-27 19:31:03 发布

阅读量3.3k

点赞数 4

文章标签： react.js javascript 前端

原文链接：https://stackoverflow.com/questions/63649629/react-v6-route-guarding-and-routing-within-component

版权

react-router 升级到 v6 之后路由守卫的方式有所不同。我在 Stack Overflow 上找的时候，发现一个比较简单的方法，记录在此。

import { Navigate, useLocation } from "react-router-dom"
const PrivateRoute = (props: { children: React.ReactNode }): JSX.Element => {
 const { children } = props
 // 拿到判断是否登录的变量
 const isLoggedIn:boolean = /* 自己 App 的逻辑*/

  return isLoggedIn ? (
  // 如果是登录用户，则可以访问我们传入的 children 组件
    <>{children}</>
  ) : (
  // 未登录用户重定向到 login 页面
    <Navigate
      replace={true}
      to="/login"
      state={{ from: `${location.pathname}${location.search}` }}
    />
  )
}

//  v6 要求 Route 需要用 Routes 包裹
<Routes>
	// v6 的 element 里面只能接受一个 JSX 元素
   <Route path="/PRIVATE" element={<PrivateRoute> <PrivatePage /> </PrivateRoute>}/>
</Routes>

这样就可以实现一个比较简单的路由守卫功能了。

v6 版本的官网 FAQ 地址