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>

Okey，所以我的情况很简单：如果路径不等于Container或"/"，我不希望"/user/:id"组件呈现。因此，如果路径为"/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>

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

react-router v4嵌套路由问题

1 个答案: