如何在React Router v4中使用Context API？Redirect不生效问题

嘿，我来帮你分析下这个Redirect不生效的问题！

你现在的代码结构里，Switch组件只会遍历它的直接子元素，并渲染第一个匹配当前路径的元素。但你把ContextB直接放在了Switch里面，它不是Route或Redirect这类路由组件，所以Switch会默认它「总是匹配成功」——只要前面的/route1不匹配，Switch就会直接渲染ContextB，然后停止往下遍历，后面的<Redirect from='/' to='/route1' />自然就永远不会被执行到了。

解决方案一：将ContextB嵌套在对应Route的render函数中 #

如果只有/route2和/route3需要ContextB，可以把ContextB放到对应Route的render回调里，让它成为路由组件的子元素，而不是Switch的直接子：

<ContextA>
  <Switch>
    <Route exact path='/route1' component={ Component1 } />
    {/* /route2路由下渲染ContextB和Component2 */}
    <Route exact path='/route2' render={() => (
      <ContextB>
        <Component2 />
      </ContextB>
    )} />
    {/* /route3路由下渲染ContextB和Component3 */}
    <Route exact path='/route3' render={() => (
      <ContextB>
        <Component3 />
      </ContextB>
    )} />
    <Redirect from='/' to='/route1' />
  </Switch>
</ContextA>

解决方案二：用父Route包裹ContextB和内部Switch #

如果/route2和/route3都需要ContextB，可以用一个父Route匹配这两个路径，内部嵌套Switch处理具体路由，这样既保证Context生效，又不影响外层Switch的匹配逻辑：

<ContextA>
  <Switch>
    <Route exact path='/route1' component={ Component1 } />
    {/* 匹配/route2或/route3路径，内部统一提供ContextB */}
    <Route path={['/route2', '/route3']} render={() => (
      <ContextB>
        <Switch>
          <Route exact path='/route2' component={ Component2 } />
          <Route exact path='/route3' component={ Component3 } />
        </Switch>
      </ContextB>
    )} />
    <Redirect from='/' to='/route1' />
  </Switch>
</ContextA>

这样调整后，外层Switch就能正常遍历所有直接子路由组件，当路径是/时，前面的Route都不匹配，就会触发Redirect跳转到/route1啦。

内容的提问来源于stack exchange，提问作者vinicius sabadim