react-router怎么做路由守卫?
最新回答
江心薄雾起
2026-04-04 05:48:30
使用高阶组件实现路由守卫的示例代码如下：
通过创建一个高阶组件 PrivateRoute，接收一个组件作为参数，并返回一个新的组件，实现对目标组件的权限验证。当用户已登录时渲染目标组件，否则重定向到登录页面。
示例代码如下：
通过 PrivateRoute 组件保护需要权限的路由，如：
其中 isAuthenticated 表示当前用户是否已登录。
使用函数组件或 render 属性实现路由守卫的示例代码如下：
通过 Route 组件的 render 属性或函数式组件，实现根据条件渲染不同组件或页面。在渲染函数中实现路由守卫逻辑，如检查用户是否登录，根据用户角色判断是否可访问页面。若条件不满足，则可返回重定向或提示信息，否则渲染目标组件或页面。
示例代码如下：
通过 PrivateRoute 组件，接受 component、isAuth 和 rest 参数，当用户已登录时渲染目标组件，否则重定向到登录页面。
使用函数式组件实现路由守卫的示例代码如下：
在函数组件中直接实现路由守卫逻辑，如使用 useEffect 钩子函数检查用户状态。当条件不满足时，使用 history.push 方法进行页面重定向。
示例代码如下：
若用户未登录，则使用 history.push 方法将页面重定向到登录页面。这里的 useEffect 钩子函数会在组件渲染完成后执行，并可添加其他依赖项。
热门标签
