基于路由进行任务列表过滤（三）01-三种路由重定向方式：path=filter & exact path= render={() = Redirect to=all & exact from= to=

基于路由进行任务列表过滤——三种路由重定向方式：path="/:filter?" & exact path="/" render={() => <Redirect to="/all" & exact from=’/’ to=’/all’

• 需求：根据当前 URL 路径，来展示不同的任务

  • http://localhost:3000/all 表示：要渲染所有任务
  • http://localhost:3000/will 表示：要渲染未完成的任务
  • http://localhost:3000/done 表示：要渲染已完成的任务

• 问题：如何获取整个内容？ 使用路由参数，配置路由规则为：/:filter

  • 可以在路由参数后面，添加一个 ? 表示当前参数是可选的，也就是说：传该参数，也可以不传这个参数

//重定向——方式一       --------------------------------
{/* 路由后面的？表示动态参数是可选的 */}
<Route path="/:filter?" component=... />


  // 获取动态路由参数
  let type = props.match.params.filter
  if (!type) {
    // 路由匹配 / ，那么就没有动态参数，所有需要指定默认值-all
    type = 'all'
  }

• 路由匹配问题
  • 当 URL 地址为： http://localhost:3000/ 的时候， 这个 URL 地址，能够被 path="/" 来匹配；也能够被 path="/:filter?" 来匹配，而这样的话，我们的代码，就会出现一些问题，比如：导致组件重复渲染

<BrowserRouter>
    <Switch> 
      //重定向——方式三       --------------------------------
        <Redirect exact from='/' to='/all'/>

        //重定向——方式二       --------------------------------
        <Route exact path="/" render={() => <Redirect to="/all" />} />

        //重定向——方式一      --------------------------------
        <Route path="/:filter?" component={App} />

          // 获取动态路由参数
          let type = props.match.params.filter
          if (!type) {
            // 路由匹配 / ，那么就没有动态参数，所有需要指定默认值-all
            type = 'all'
          }
      </Switch>
</BrowserRouter>

• Switch 组件：用来包裹多个 Route 组件，被包裹的多个 Route 组件中，只要有一个路由规则匹配了，就不在匹配后续的路由规则了

<Switch>
  <Route exact path="/"/>
  <Route exact path="/:filter?"/>
</Switch>

路由重定向-效果