react-router v4嵌套路由问题

Question

我有以下情况：

<Wrapper>
   <Container>
      <Route exact path="/" component={UserListing} />
      <Route path="/user/:id" component={UserDetails} />
      <Route exact path="(/|/user/\d+)" component={StaticComponent} />
   </Container>

   <Route path="/create-account" component={CreateAccount}/>
</Wrapper>

好的，所以我的情况很简单：如果路径不等于 "/" 或 "/user/:id"，我不希望 Container 组件呈现。 因此，如果路径是"/create-account"，则只有Wrapper 和CreateAccount 作为孩子应该出现，没有Container。

寻求帮助。谢谢

Answer 1

你可以编写一个自定义组件来决定是否像容器一样渲染

const RouterRenderer = ({ location, children }) => {
    if(location && location.state && location.state.noMatch) {
        return null;
    }
    return children;
}

还有一个子组件告诉这个容器没有匹配的东西

const NoMatch = () => {
    return <Redirect to={{state: {noMatch: true}}} />
}
export default withRouter(NoMatch);

现在你可以像这样使用它们了

<Wrapper>
   <RouterRenderer>
       <Container>
          <Switch>
              <Route exact path="/" component={UserListing} />
              <Route path="/user/:id" component={UserDetails} />
              <Route exact path="(/|/user/\d+)" component={StaticComponent} />
              <NoMatch />
          </Switch>
       </Container>
   </RouterRenderer>
   <Route path="/create-account" component={CreateAccount}/>
</Wrapper>

P.S. 请注意，在使用 NoMatch 组件时使用 Switch 很重要，因为您只想在没有其他组件时才渲染它 路线匹配。您也可以编写 RouteRenderer 函数的形式 使用 HOC 而不是功能组件。