React不同于vue，它通过在路由中设置元字符来实现路由拦截。本文对此进行了详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
React不同于vue，它通过在路由中设置元字符来实现路由拦截。在Vue中，框架提供了路由守卫的功能，用来在进入某条路由之前进行一些验证。如果验证失败，跳转到404或者登陆页面，比如Vue中的beforeEnter函数：
.
router.beforeEach(async(to，from，next)={
const toPath=to.path
const fromPath=from.path
})
.
react实现路径拦截的基本思想是利用路径的渲染功能。通过判断拦截条件，不同的组件可以跳转，从而实现拦截。在之前的版本中，React路由器也提供了类似的onEnter hook，但是在React Router的4.0版本中，取消了这个方法。React Router 4.0以后采用声明式组件，路由是一个组件。要实现路由守护功能，还得自己写。
如果不使用路由保护，路由器组件看起来像这样：
从“React”导入*作为React；
从“react-router-dom”导入{ HashRouter，Switch，Route，Redirect }；
从'导入索引。/page/index '；
从'导入主页。/page/home '；
从“”导入错误页面。/page/error '；
从'导入登录。/page/log in '；
导出常量路由器=()=(
哈希鲁特
转换
路由路径='/'精确组件={Index}/
路由路径='/login '确切组件={Login}/
路由路径='/home '精确组件={Home}/
路由路径='/404 '确切组件={ErrorPage}/
重定向至='/404' /
/开关
/HashRouter
);
上面的路由器组件包含三个页面：
下船
主页
找不到文件
和四条路线：
根路由
着陆路线
主页路由
404路由
其中，根路由和/home路由指向主页路由。
以上是基本的路由定义，可以在登陆/首页和404页面之间来回跳转，但是有一些问题：
未登录时，可以直接跳转到主页。
在登录状态下，还可以输入/登录路径跳转到登录页面。
现在，我们要完成这样一个功能：
未登录时不能直接跳转到主页。如果在未登录时跳转到首页，则需要重定向到登录路径。
登录后不能跳转到登录页面。如果登录时跳转到登录页面，则需要重定向到主页路由。
为了实现这一功能，有两种方案：
在每个组件中，根据道具上的历史对象进行跳跃。
执行全局路由保护处理。
首先，在以下目录src中创建一个routerMap.js文件，代码如下：
将auth设置为true表示该路由需要权限验证。
/**
*定义路由组件，设置auth为true，表示路由需要权限验证。
*/
从'导入管理。/pages/Admin '；
从'导入登录。/pages/log in '；
从'导入错误。/pages/Error '；
导出常量routerMap=[
{路径：“/”，名称：“管理”，组件：管理，验证：真}，
{路径：“/login”，名称：“login”，组件：Login}，
{路径：“/错误”，名称：“错误”，组件：错误}，
];
所有路由跳转都由FrontendAuth高层组件代理完成。以下是FrontendAuth.js组件的实现：
/**
*路由保护检查
*/
从“react”导入React，{ Component }；
从“react-router-dom”导入{Route，Redirect }；
类FrontendAuth扩展组件{
//eslint-disable-next-line no-used-constructor
施工员(道具){
超级(道具)；
}
render() {
const {routerConfig，location }=this.props
const {pathname}=位置；
const is login=local storage . getitem(' user ')；
console.log(路径名，is log in)；
console.log(位置)；
//如果路由不需要权限验证，除了登录状态的登录页面。
//因为登录后无法跳转到登陆页面
//这部分代码，是为了在非登陆状态下，访问不需要权限校验的路由
const targetRouterConfig=路由器配置。查找(
（项目)=项目。路径===路径名
);
控制台。log(targetRouterConfig)；
if (targetRouterConfig！targetRouterConfig.auth！isLogin) {
const { component }=targetRouterConfig；
返回路由确切路径={路径名}组件={ component }/；
}
if (isLogin) {
//如果是登陆状态，想要跳转到登陆，重定向到主页
如果(路径名==='/登录'){
返回重定向到='/'/;
}否则{
//如果路由合法，就跳转到相应的路由
if (targetRouterConfig) {
返回（
路由路径={路径名}组件={ targetrouterconfig。组件}/
);
}否则{
//如果路由不合法，重定向到404 页面
返回重定向到='/error '/；
}
}
}否则{
//非登陆状态下，当路由合法时且需要权限校验时，跳转到登陆页面，要求登陆
if(targetRouterConfig targetRouterConfig。auth){
返回重定向到='/登录'/；
}否则{
//非登陆状态下，路由不合法时，重定向至404
返回重定向到='/error '/；
}
}
}
}
导出默认FrontendAuth
然后，定义路由器组件，在App.js中，该组件是经过高阶组件包装后的结果：
"导入"。/app。少’；
从“做出反应”导入反应，{ Fragment }；
从" react-路由器-dom "导入{开关}
从'导入FrontendAuth ./FrontendAuth '；
从'导入{routerMap} ./routerMap '；
函数App() {
返回（
碎片
{/*只匹配一个，匹配成功就不往下匹配，效率高*/}
转换
FrontendAuth路由器配置={routerMap}/
/开关
/片段
);
}
导出默认应用程序；
测试
到此这篇关于反应路由守卫的实现（路由拦截)的文章就介绍到这了，更多相关反应路由守卫内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。