不同于vue，通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件（比如sessionID是否存在）来实现不同的组件的跳转，从而实习拦截。
接下来，我们实现一个简单的实例了解路由拦截的基本流程。
页面初次渲染的时候，需要我们进行登录。在这个首屏的页面里，我们放入一个链接。当点击链接，我们想进入我们的布局页面，（实际项目中是我们的后台）。但是布局页面是不允许我们随意进入的。如果没有登录（真实项目中我们以sessionid作为是否登录过的条件)，那么页面会强制进入登录页面。否则进入我们的布局页面（实际项目中的后台）
我们这里写几个基本的组件，作为上述条件对应的组件：
login.js -------->登录页面
Layout.js -------->布局页面（实际项目中的后台）
author --------->授权组件 （作为拦截组件，拦截的条件写在这个组件中）
isLogin ---------->判断是否登录过的条件 （实际项目中的sessionID）
这个实例我们需要一个判断条件。也就是isLogin，我们结合状态管理工具，（本实例中的状态管理工具选用mobx），isLogin==true，表示我们我们可以访问该组件。否则表示我们无权访问该组件。
--------------------------------------------------------------------------------------------
1 index.js文件（入口文件）
2
3 import registerServiceWorker from ‘./registerServiceWorker‘;
4 import {Provider} from "mobx-react";
5 import {observable} from "mobx";
6 import {BrowserRouter,Switch,Route} from "react-router-dom";
7 import Login from "./components/login/Login.js"
8 import AuthorizedRoute from "./components/author/author.js"
9 import Layout from "./components/Layout.js"
10
11 class Store{
12 @observable isLogin=false;
13 }
14 const store=new Store()
15
16 ReactDOM.render(
17 <Provider store={store}>
18 <BrowserRouter>
19 <div>
20 <Switch>
21 <Route path="/" exact component={Login} />
22 <Route path="/login" component={Login} />
23 <AuthorizedRoute path="/author" component={Layout} />
24 </Switch>
25 </div>
26 </BrowserRouter>
27 </Provider>
28 , document.getElementById(‘root‘));
29
30 registerServiceWorker();
-----------------------------------------------------------------------------------------
1 author.js（主要内容是导出一个授权的组件。该组件内处理拦截逻辑）
2
3 import React, { Component } from ‘react‘;
4
5 import {Redirect,Route}from "react-router-dom";
6 import Login from "../login/Login.js"
7 import {observer,inject} from "mobx-react";
8 @inject("store")
9 @observer class AuthorizedRoute extends Component{
10 render(){
11 console.log("author里的store:",this.props.store)
12 let { component: Component,...rest} =this.props; //获取顶层provider上所有的信息
13 let {isLogin}=this.props.store;
14 console.log("isLogin:",isLogin)
15 console.log("this.props:",this.props)
16 return(
17 <Route {...rest} render={props=>{
18 return isLogin?<Component {...this.props} />:<Redirect to="/Login" /> //这里的<Component {...this.props} />实际上指向的是Layout组件
19 }}/>
20 )
21 }
22 }
23 export default AuthorizedRoute
-----------------------------------------------------------------------------------
1 login.js（登录组件）
2
3 import React, { Component } from ‘react‘;
4
5 import{Link} from "react-router-dom"
6 class Login extends Component{
7 render(){
8 return(
9 <div>
10 <p>请输入账户:<input type="text" /></p>
11 <p>请输入密码:<input type="password" /></p>
12 <hr />
13 <Link to=‘/author‘>进入main组件</Link>
14 </div>
15 )
16 }
17 }
18 export default Login
------------------------------------------------------------------------------------
1 Layout.js （布局组件）
2
3 import React, { Component } from ‘react‘;
4
5 class Layout extends Component{
6 render(){
7 return(
8 <div>
9 <div>
10 <ul>
11 <li>1111</li>
12 <li>2222</li>
13 <li>33333</li>
14 </ul>
15 </div>
16 <div>
17 <p>wenben1</p>
18 <p>wenben1</p>
19 <p>wenben1</p>
20 <p>wenben1</p>
21 </div>
22 </div>
23 )
24 }
25 }
26
27 export default Layout
28 这里我们对layout组件进行了拦截，如果还有其他的页面也需要进行拦截，我们也可以在index.js中多添加一个授权组件。把它的component指向该组件，比如我们还有一个home页面也需要判断。那么我们可以做如下修改：
29
30 <Provider store={store}>
31 <BrowserRouter>
32 <div>
33 <Switch>
34 <Route path="/" exact component={Login} />
35 <Route path="/login" component={Login} />
36 <AuthorizedRoute path="/author" component={Layout} />
37 <AuthorizedRoute path="/home" component={Home} />
38 </Switch>
39 </div>
40 </BrowserRouter>
41 </Provider>
这个实例中我们用的是mobx作为状态管理工具，在全局定义了一个isLogin，我们也可以利用redux实现同样的功能，真实项目中一般我们会在登录以后通过访问后台返回的sessionID来进行判断。登录成功以后我们把sessionID存入sessionStorage中，在授权组件（本例中的AuthorizedRoute）先在本地取出sessionID，再通过它进行判断。
参考实例：https://www.jb51.net/article/139322.htm
————————————————
版权声明：本文为CSDN博主「sleeppingforg」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/baidu_41601048/article/details/80954158
原文地址：https://www.cnblogs.com/GGbondLearn/p/12207257.html