Javascript react路由器v4嵌套路由问题

我有以下情况：

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

，我不希望

容器

组件呈现。 因此，如果路径为

“/create account”

则应仅显示

包装器

，并将

CreateAccount

作为子级，而不显示

容器

---

正在寻求帮助。谢谢

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

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);

const NoMatch=（）=>{
返回
}
使用路由器导出默认值（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

非常重要，因为您只想在没有其他组件时渲染它 路线匹配。您还可以在表单中编写RouterEnder函数 指HOC而不是功能组件

---

是否可以仅使用

路线

修复我的案例？如果没有这些道具处理和重定向的所有东西，

Redirect

？@Patrickkx，上面的用例以一种通用的方式处理您的用例，也可以不使用上面的方法来处理它，但这将要求您在容器中实际将所有可能的路由指定为正则表达式，并将其呈现为路由