tcmurphy tcmurphy - 1 year ago 202
React JSX Question

React Router Dom one route outside of nest

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!

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download