react-router-dom之Redirect(重定向)理解

这段时间写个小项目，实战过程中，路由理解得一塌糊涂
其中有个业务逻辑是这样的:
我有个layout布局组件，想在其中显示我所定义的子路由，其中有个需求，
当我访问/home时，我想重定向到/home/page1，其中我的配置大概如下：

<HashRouter>
  <Switch>
    <Route exact path="/" render={() => <Redirect to="/home/page1" push />} />        
    <Route path="/home" 
      render={() => (
        <>
          <Redirect to="/home/page1" />
          <Route path="/home/page1" />
          <Route path="/home/page2" />
        </>
      )} 
    />
    <Route path="/404" component={NotFound} />
    <Route path="/login" component={Login} />
    <Route component={NotFound} />
  </Switch>
</HashRouter>

如上，这么做的话，第一次访问/home，是会重定向到/home/page1，然而当我第二次访问/home的时候，一片空白

发生了什么？

众所周知，react有两种组件生命方式，函数式组件和类声明组件。

重点来了，它Redirect再牛逼，也是组件啊，组件就得无条件接受生命周期这一事实（除非特殊处理），回过头来，大概运行方式是这样的：
1、访问/home
2、解析home的render
3、发现Redirect，访问/home/page1，其实访问/home/page1的时候，是解析了/，/home，/home/page1这三个路由，只不过react-router-dom做了处理，渲染过的组件会继续复用
5、终于来到这一步了, 其实来到这一步，不难发现，to的属性值根本没有变，Redirect就不会再走一次，所以再次访问/home的时候，就真的访问/home了，不会匹配到任何一次子Route

所以，我们应该怎么做？

答案：Switch
上一步只要改成如下形式，就ok了

<HashRouter>
  <Switch>
    <Route exact path="/" render={() => <Redirect to="/home/page1" push />} />        
    <Route path="/home" 
      render={() => (
        {/* 重要的事情说N遍，Redirect一定要放在Switch的最后一个 */}
        <Switch>
          <Route path="/home/page1" />
          <Route path="/home/page2" />
          <Redirect to="/home/page1" /> // 我一定要放在最后一个（Switch匹配机制如此）
        </Switch>
      )} 
    />
    <Route path="/404" component={NotFound} />
    <Route path="/login" component={Login} />
    <Route component={NotFound} />
  </Switch>
</HashRouter>

上面大概意思就是Switch会去精确匹配，找不到的话，会处理Redirect的逻辑
或许有人会问，Redirect放在第一个不行吗？嗯，你可以尝试一下！！

以上只是我的个人见解，轻喷，讲解错误请指正，谢谢观看！

最后编辑于：2019.07.24 19:53:35