react-router v4 nesting routing issue

Question

I have a following situation:

<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, so my case is simple: I don't want the Container component to render if path does not equal to "/" or "/user/:id". So if path is "/create-account" only Wrapper with CreateAccount as child should appear, without Container.

Looking for some help. Thank you

Answer 1

You can write a custom component that decides whether or not to render Container like

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

And a sub component which tells this container that nothing matched like

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

Now you can use them like

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