Issue

这里的问题是Switch组件"呈现与位置匹配的第一个子级<Route>或<Redirect>"官方文件没有明确指出Route(and variations of)和Redirect是Switch组件中唯一有效的子组件.当命中非路由或非重定向组件时，路由匹配停止，that组件返回并呈现.接下来发生的是，嵌套路由渲染SomeRandomComponent被包括性地匹配，就像它将由路由而不是在Switch内一样.

Solution

重构代码，使TokenLayout组件inside呈现路径.

以下是一些建议:

• 创建包装器组件

    const TokenLayoutWrapper = props => (
      <TokenLayout>
        <SomeRandomComponent {...props} />
      </TokenLayout>
    );
  

  ...

    <Switch>
      <Route exact path="/" component={SampleComponent} />
      <Route path="/some-random-component" component={TokenLayoutWrapper} />
      <Route path="*" component={NotFound} />
    </Switch>
  

• 创建高阶组件

    const withTokenLayout = Component => props => (
      <TokenLayout>
        <Component {...props} />
      </TokenLayout>
    );
  

  装饰SomeRandomComponent组件导出:

    export default withTokenLayout(SomeRandomComponent);
  

  ...

    <Switch>
      <Route exact path="/" component={SampleComponent} />
      <Route path="/some-random-component" component={SomeRandomComponent} />
      <Route path="*" component={NotFound} />
    </Switch>
  

• 只需使用renderprops 在内联函数中包装SomeRandomComponent，将路由props 传递到SomeRandomComponent.

    <Switch>
      <Route exact path="/" component={SampleComponent} />
      <Route
        path="/some-random-component"
        render={props => (
          <TokenLayout>
            <SomeRandomComponent {...props} />
          </TokenLayout>
        )}
      />
      <Route path="*" component={NotFound} />
    </Switch>