React Router: How to render element on all routes, except one?

user_9136921 0
Viewed 5635

I have HTML structure like this:

<body>
  <nav>
     <!--navigation elements -->
  </nav>
  <div className='main'>
     <!--other elements -->
  </div>
  <div className='container'></div>
</body>

And routing defined like this:

<Router>
  <Fragment>
    <Navbar />
    <Route exact path="/" component={Landing} />
    <div className="container">
       <Alert />
       <Switch>
           <Route exact path="/register" component={Register} />
           <Route exact path="/login" component={Login} />
           <Route exact path="/profiles" component={Profiles} />
       </Switch>
    </div>
  </Fragment>
</Router>

The "container" element is present on all routes however I do not want it to be rendered on the "/" route.

How can I stop <div className="container"> from being rendered on the "/" route? I want it to be rendered on all other routes except of "/".

A solution I found, but don't want to use is to explicitly insert the element with class="container" in each component that is rendered in my <Switch>. Is there a better way?

react-router reactjs css html javascript
3 Answers

You should be able to achieve what you require via nested routes and a "no match route".

The idea would be to introduce structure to your routing via nested routes, to restrict rendering of <div className="container"> to non / routes.

To do this, you could extract a component (ie WithContainer) that renders a <Route> for paths; /register, /login and /profiles, inside of the <div className="container">. You would then change your <Switch> to now render two routes for the following route cases;

  1. A <Route/> that renders the Landing component on an exact match of /
  2. A <Route/> that renders your new WithContainer component on no specific route (ie any path that does not exactly match /)

By using the <Switch> in this way, it causes the routing behaviour to render either Landing or WithContainer (but not both) depending on the first matched route. We take advantage of that behaviour to restrict rendering of the WithContainer (and in turn, the <div className="container"> element) for "non /" routes.

In code, this approach could be expressed as:

const WithContainer = () => (
    <div className="container">
       { /* Wrap routes in container div */ }
       <Route exact path="/register" component={Register} />
       <Route exact path="/login" component={Login} />
       <Route exact path="/profiles" component={Profiles} />
    </div>)

const Main = () => (
  <main> 
    <Switch>
      <Route exact path='/' component={Landing}/>
      <Route component={ WithContainer } /> {/* No match route */ }
    </Switch>
  </main>
)

Hope that helps!

user_85267050
user_25256330

If you don't want to create a separate component, you can just do this. You need to keep the inner switch as well, if you want to keep the original functionality.

// parent switch
<Switch>
  <Route exact path="/" component={Landing} />
  // start route wrap!!!
  <Route> 
    <div className="container">
      <Switch>
        <Route exact path="/register" component={Register} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/profiles" component={Profiles} />
      </Switch>
    </div>
  </Route>
 // end route wrap!!!
</Switch>

You should think of Routes as of any other UI components. You can nest them arbitrarily.

user_5566940
Related