Switch的使用 + 路由监听 + Switch + Redirect + 路由嵌套

Switch的使用

Switch可以看成js的switch，case则可以看成是每一条，可以提高路由匹配效率，一旦匹配上对应的路由，则不会往下寻找路由匹配了

  <div className="subnav">
    <NavLink to={props.match.url + "/computer"} activeClassName="active">电脑</NavLink>
    <NavLink to={props.match.url + "/pad"} activeClassName="active">平板</NavLink>
    <NavLink to={props.match.url + "/acc"} activeClassName="active">配件</NavLink>
  </div>

  <Switch>
    <Route path={props.match.path + "/phone"} component={Phone}/>
    <Route path={props.match.path + "/computer"} component={Computer}/>
    <Redirect from={props.match.path} to={props.match.path + "/computer"} exact />
    <Route path={props.match.path + "/pad"} component={Pad}/>
    <Route path={props.match.path + "/acc"} component={Acc}/>
  </Switch>

路由监听

 this.props.history.listen((location)=>{
    // 路由改变时会触发这里的方法
  })

路由的严格匹配与模糊匹配

1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

Redirect的使用（路由重定向）

1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2.具体编码：
<Switch>
    <Route path="/about" component={About}/>
    <Route path="/home" component={Home}/>
    <Redirect to="/about"/>
</Switch>

路由的嵌套

一级路由

App.js
div className="panel-body">
   {/* 注册路由 */}
    <Switch>
      <Route path="/about" component={About}/>
      <Route path="/home" component={Home}/>
      <Redirect to="/about"/>
    </Switch>
  </div>

二级路由

Home 组件
<div>
    <h2>Home组件内容</h2>
    <div>
      <ul className="nav nav-tabs">
        <li>
          <MyNavLink to="/home/news">News</MyNavLink>
        </li>
        <li>
        <MyNavLink to="/home/message">Message</MyNavLink>
        </li>
      </ul>
      
      {/* 注册路由 */}
      <Switch>
        <Route path="/home/news" component={News}/>
        <Route path="/home/message" component={Message}/>
        <Redirect to="/home/news"/>
      </Switch>
    </div>
</div>

注意：

1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的