Conditional rendering with React Router

Question

I'd like to render some routes with a nav at the top, while rendering other routes (like a sign-up / sign-in page) without any nav.

For the setup with the nav, I have:

const App = () => (
  <Router>
    <div>
      <Nav />
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/account" component={Account} />
        <Route path="/news" component={News} />
      </div>
      <Footer />
    </div>
  </Router>
);

I'm trying to find the best way of handling this with React Router (seems like it would have to handled with some type of conditional maybe? - "if my current route matches any one of these routes, then render like so else render this.").

Thanks!

This seems to answer your question https://stackoverflow.com/questions/53780075/excluding-header-component-on-a-specific-page-with-react-router/53785226 — Jay, Sep 08 '20 at 17:33

score 9 · Answer 1 · answered Oct 20 '17 at 08:49

You have at least two possibilities:

Use Route "path" property to test the route and render the component. Path property accepts path.to.regexp expressions.
Wrap your component with withRouter method and inside Nav test if the route matches and render null otherwise.

First answer:

const App = () => (
  <Router>
    <div>
      <Route path="/(?!signin|signup)" component={Nav}/>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/account" component={Account} />
        <Route path="/news" component={News} />
      </div>
      <Footer />
    </div>
  </Router>
);

Second answer:

import { withRouter } from 'react-router'
const NavWithRouter = withRouter(Nav);

const App = () => (
  <Router>
    <div>
      <NavWithRouter/>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/account" component={Account} />
        <Route path="/news" component={News} />
      </div>
      <Footer />
    </div>
  </Router>
);

score 1 · Answer 2 · answered Jun 21 '18 at 11:42

1

Where A,B,C are the different routes like foo/A.

answered Jun 21 '18 at 11:42

shinzou

5,850
10
60
124

score 1 · Answer 3 · answered Jan 05 '19 at 12:30

I usually use two different Layout pages. And within the Layout pages, have a router for the content.

My code will look like this:

<Router>
  <Route path="/login" component={AuthLayout} />
  <Route path="/logout" component={AuthLayout} />
  <Route path="/some/path" component={Layout} />
</Router>

Within each Layout, there will be the usual header / footer / navbars and then another set of routes.

<div className="auth-layout">
  <header className="auth-layout__header"></header>
  <main className="auth-layout__content">
    <Switch>
      <Route path="/login" component={Login} />
      <Route path="/logout" component={Logout} />
    </Switch>
  </main>
</div>

In this way, I have a direct mapping from requirements to code. In my code, there are much more differences between the two layouts.

score -2 · Answer 4 · answered Oct 20 '17 at 12:29

-2

Just use a prop for this & inside the children your are able to conditional render the nav.

<Route exact path="/" render={() => <Home hasNav={false} />}

answered Oct 20 '17 at 12:29

chmtt

437
4
10

Conditional rendering with React Router

4 Answers4

Linked