React Router Dom one route outside of nest

Question

Hopefully this has a simple answer but I haven't found anyone else asking this: I'm just trying to create a route hierarchy with one route (the signin page in this case) that lives outside of a wrapper, and every other route living inside said wrapper (which has header/sidebar/etc). I'm using react 16.0.0 + react-router-dom 4.2.2 and my futile attempt to get things working is

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Wrapper from './components/common/Wrapper';
import App from './components/App';
import HomePage from './components/Home';
import SignInUpPage from './components/SignInUp';
import DistrictsPage from './components/Districts';
import StudioPage from './components/Studio';
import CollectionsPage from './components/Collections';


export default (
  <Wrapper>
    <Route path="/account" component={SignInUpPage} />
    <App>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/districts" component={DistrictsPage} />
        <Route path="/studio" component={StudioPage} />
        <Route path="/collections" component={CollectionsPage} />
      </Switch>
    </App>
  </Wrapper>

);

But obviously this just renders the app component below the signin, same result if I nest the App component within the Switch. Thanks very much for any help!

Steve Holgado Steve Holgado · Accepted Answer · 2017-10-02T17:54:28

You could render your App component only if /account doesn’t match:

<Wrapper>
  <Switch>
    <Route path="/account" component={ SignInUpPage } />
    <Route path="/" component={ App } />
  </Switch>
</Wrapper>

...and then move your other routes inside your App component:

App.js

<Switch>
  <Route exact path="/" component={ HomePage } />
  <Route path="/districts" component={ DistrictsPage } />
  <Route path="/studio" component={ StudioPage } />
  <Route path="/collections" component={ CollectionsPage } />
</Switch>

I’m assuming from your code that Wrapper is to wrap everything and App is only to wrap the nested routes. You can switch them around if I have misunderstood.

React Router Dom one route outside of nest

1 Answers