react-router-dom中如何进行路由权限控制，路由验权，props传值

1.router.config.js 这里存放了所有路由

import React from 'react'
// import { Router, Route, IndexRoute, hashHistory, childRoutes/* , Redirect */ } from 'react-router'
import {BrowserRouter as Router, Route, Switch, hashHistory} from 'react-router-dom';
import App from '../App';
import About from '../pages/About'
import Login from '../pages/login/Login'
import Undefined from '../pages/404/404'
import List2 from '../pages/routerlist/list2';
import List3 from '../pages/routerlist/list3';
import Layout from '../pages/layout/layout'
import First from '../pages/layout/first'
import Second from '../pages/layout/secong'
const Routes = [
  { path: "/app", name: "app", component: App, auth: true },
  { path: "/layout", name: "Home", component: Layout,auth: true,
    routes: [
      {
        path: "/layout/first", 
        name: "first", 
        component: First,
        auth: true
      },
      {
        path: "/layout/second", 
        name: "second", 
        component: Second,
        auth: true
      }
    
    ]
 },
  { 
    path: "/list/list3", 
    name: "Home", 
    component: List3,
    auth: true
  },
  { path: "/", name: "/", component: Login, },
  { path: "*", name: "indexedDB", component: Undefined }
]
export default Routes;

2.route-with-sub-routes.js 路由控制展示函数

import React from 'react';
import {Route} from "react-router-dom";

const RouteWithSubRoutes = route => (
     (
            // pass the sub-routes down to keep nesting
            
        )}
    />
);
export default RouteWithSubRoutes;

3.index.js 这里是底层依赖启动加载项

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import routes from './configs/router.config'
import RouteWithSubRoutes from './configs/route-with-sub-routes'
import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
import { Provider } from 'react-redux';
import configureStore from './redux/index.js';
import {BrowserRouter as Router,Route, Switch,Redirect } from 'react-router-dom';
import {
    update,
    add,
    rm
  } from './redux/actions'
  
// import { Button } from 'antd-mobile';
// ReactDOM.render(Start, mountNode);
const store = configureStore();
// console.log(store.getState(),'123');
// store.dispatch(update('libai'))
console.log(store.getState(),'123')
ReactDOM.render( 
    // let token = 'qwe'
    
        {/*  */}
        
        
                         {routes.map((route, i) => )}
                    
        {/*            
        { 
            routes.map((route, index) => { 
            // return 
            //     (!route.auth ? () : (true ?  : 
            //     )
            //     )} />
            return 
                } />
        })

        }
         */}
        
    
    , 
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

4.layout.js 父路由

import './layout.css'
import React, { Component } from 'react';
import {BrowserRouter as Router, NavLink, Switch,Redirect,Route, Link} from 'react-router-dom';
// import { createForm } from 'rc-form';
import First from './first';
import Second from './secong';
import Dlist from './dlist';
import RouteWithSubRoutes from '../../configs/route-with-sub-routes'
class Layout extends React.Component {
    handleList (){
        console.log('方法传递');
    }
  render() {
    // const { getFieldProps } = this.props.form;
   
    return (
       

           

               layout
           
           
                
组件插入
           
           

            {this.props.routes.map((route, i) => {
                return (
                    

                        {route.name}
                    
                )
            })}
            
           

                {/* 
                    
                    
                    {this.props.routes.map((route, index) => {
                         return 
                                
                            } />
                    })}
                 */}
                  
                            {this.props.routes.map((route, i) => )}
                        
            
        
        
    );
  }
}

// const BasicInputExampleWrapper = createForm()(BasicInputExample);
// ReactDOM.render(, mountNode);
// class Login extends Component {
//   render() {
//     return (
//       
//     );
//   }
// }

export default Layout;

5.first.js 子路由

import React, { Component } from 'react';
import { HashRouter, Switch, Route, Redirect,withRouter } from 'react-router-dom';
class First extends React.Component {
    // constructor(props) {
    //     super(props)
    // }
  render() {
    // const { getFieldProps } = this.props.form;
    return (
       

           first
        
        
    );
  }
  componentDidMount(){
    setTimeout(()=>{
    this.props.history.push('/layout/second');
    },2000)
}
}

// const BasicInputExampleWrapper = createForm()(BasicInputExample);
// ReactDOM.render(, mountNode);
// class Login extends Component {
//   render() {
//     return (
//       
//     );
//   }
// }

export default First;

6.secong.js 子路由

import React, { Component } from 'react';
import { HashRouter, Switch, Route, Redirect,withRouter } from 'react-router-dom';
class Second extends React.Component {
    // constructor(props) {
    //     super(props)
    //     }
  render() {
    // const { getFieldProps } = this.props.form;
    return (
       

           second
        
        
    );
  }
  componentDidMount(){
    setTimeout(()=>{
    this.props.history.push('/layout/first');
    },2000)
}
}

// const BasicInputExampleWrapper = createForm()(BasicInputExample);
// ReactDOM.render(, mountNode);
// class Login extends Component {
//   render() {
//     return (
//       
//     );
//   }
// }

export default Second;

7.delist.js 子模块，进行props传值

import React, { Component } from 'react';
import { HashRouter, Switch, Route, Redirect,withRouter } from 'react-router-dom';
import {update} from '../../redux/actions'
import { connect } from 'react-redux'
class Dlist extends React.Component {
    constructor(props) {
        super(props)
        this.state = {isToggleOn: true,dmt:'12'};
        // this.handleClick2 = this.handleClick2.bind(this); 
    }
    handClick=()=>{
        console.log('btn is click');
        this.setState({
            dmt: '13'
          });
        console.log(this.refs.myNum.value);
    }
    // 必须使用箭头函数才能取到this
    handClick2=()=>{
        console.log('接收传递的消息');
        this.props.func();
        console.log(this);
    }
   
render() {
    // const { getFieldProps } = this.props.form;
    const { PayIncrease } = this.props
    return (
       

          
 delist
          
 {this.props.list}
          
 {this.props.title}
          
 {this.props.userName}
          
          
          
 {React.Children.map(this.props.children,function(child){
              return child

          })}
          clik me
          注册
          方法传递
          升职加薪
        
        
    );
  }
  componentDidMount(){
      console.log(this)
    //   console.log(store);
    this.props.func();
    // setTimeout(()=>{
    // this.props.history.push('/layout/second');
    // },2000)
}
}

// const BasicInputExampleWrapper = createForm()(BasicInputExample);
// ReactDOM.render(, mountNode);
// class Login extends Component {
//   render() {
//     return (
//       
//     );
//   }
// }
//需要渲染什么数据
const getList = state => {
    console.log(state,'state')
    return {
        list: state.userInfo.cityName,
        userName:state.userInfo.userName
    }
}
console.log(getList, 'getList')
//需要触发什么行为,必须要引用redux中actions的方法
function mapDispatchToProps(dispatch) {
    // console.log(dispatch(update()),'dispatch')
    return {
        PayIncrease: () => {dispatch(update('libai'));console.log()},
        PayDecrease: () => dispatch()
    }
  }
// Dlist = connect()(Dlist)
export default connect(getList,mapDispatchToProps)(Dlist);