路由的基本用法

    // 下载第三方包 react-router-dom
    import {BrowserRouter,Route,Redirect,Link,NavLink} from 'react-router-dom';
    //在组件当中
    class Index extends Component{
        render(){
            return <BrowserRouter>
                    <Route path={}  component={} exact/>
                </BrowserRouter>
        }
    }
    //path  用于指定路径名
    //component  渲染视图  里面可以是方法
    //render  渲染视图  速度比较快 不会重新去创建元素
    //children 与render类似  区别是 无论路径是否匹配都会渲染，适合用于转场动画
    //exact       精确匹配但是不会验证尾线
    //strict      会严格验证尾线

子路由

import {BrowserRouter,Route,Redirect,Link,NavLink,Redirect} from 'react-router-dom';
//Redirect 用于 重定义项
//Link 、NavLink   都是 <a />标签   区别是  后者带有class名
  class Index extends Component{
        render(){
            return <BrowserRouter>
                    <Route path={}  component={this.listRoute}/>
                </BrowserRouter>
        }
        listRoute = () => {//子路由
             <Route path={路径}  component={视图} exact/>
        }
    }

重定义项

import {BrowserRouter,Route,Redirect,Link,NavLink,Redirect} from 'react-router-dom';
//Redirect 用于 重定义项
//Link 、NavLink   都是 <a />标签   区别是  后者带有class名
  class Index extends Component{
        render(){
            return <BrowserRouter>
                    <Route path={'/'}  render={()=><Redirect to={'/index'} />}  exact/>  //路径是 '/' 时自动到 '/index'
                    <Route path={'/index'}  component={Index}/>
                </BrowserRouter>
        }
       
    }

react路由执行的顺序 实现

//      <Route path={}  component={} exact/>
    class Route extends Component{
        render(){
            let {path,component}=this.props;
            return window.location.pathname===path && <component />
        }
    }

• 打印this.props 可以打印出方法
• 路径 传参 都可以打印出来
• 跳转路由–> push()、replace()