一个简单的react路由拦截

 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>