javascript - 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>

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

寻求帮助。谢谢

Answer 1

您可以编写一个自定义组件来决定是否像 Container 一样渲染

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. Note that its important to use Switch when you are using NoMatch component since you want to render it only when no other route matched. Also you can write RouteRenderer function in the form of an HOC instead of a functional component.