react路由器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"，则只应出现以CreateAccount为子级的Wrapper，而不应出现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.请注意，在使用NoMatch组件时使用Switch非常重要，因为您只想在没有其他组件的情况下渲染它路线匹配。您也可以在以下表单中编写RouteRenderer函数HOC而不是功能组件。