React路由配置

React路由配置
    1. 安装路由 npm i react-router-dom -S 
    2. 使用导入模块
      import { Route,HashRouter as Router,Link,NavLink,Redirect,Switch } from 'react-router-dom'

    3. 配置路由走向
        <Router>
        <Switch>
            <Route exact path='/' component={Home}></Route>
            ...

        </Switch>
        </Router>

    4. 动态路由 
        1. 语法：
           <Route path='/about/:id' component={About}></Route>

        2. 进入页面
            <Link to='/about/123'>我的</Link>
            <Link to={'/about/'+变量}>我的</Link>

            或者编程式导航
                this.props.history.push('/about/xxx')

        3. 获取动态参数
                this.props.match.params 

    5. 嵌套路由
       1. 一级 二级 多级 ... 

        2. 语法
           1. 导入组件 把组件名称做路由配置
           2.  <Index path="/doc">

                      <Switch>

                        <Route path="/doc/api" component={Api}></Route>

                        <Route path="/doc/core" component={Core}></Route>

                        {/* 二级路由重定向 */}

                        <Redirect to="/doc/api"></Redirect>

                      </Switch>

            </Index>

            3. 二级出口 Wendang 
                this.props.children 

    6. 重定向
       <Redirect from='' to=''/>
       <Redirect from='/*' to='/'/>

    7. 编程式导航   
        组件配置路由配置
        this.props.history.push()/replace()
        this.props.history.go()/goBack()