4

I'm going to start by linking the research I've done.

I'm sorry it looks like I can only post 2 external links.

TL;DR

I've found 2 ways to do the nesting in React Router 4, each one has it's advantages and drawbacks.

  • First. It's react-router's team recommended way, the advantage is that the Route components are where they load, but I find it hard to keep track of the routing.

  • Second. Manages somehow to do all the routing on one place, but there is some duplicated code and an unnecessary level of nesting by adding a helper component, also I'm not sure if it's ok to do it this way.

So these are the two ways I found to do the nesting. I'm looking for:

  • Any other ways anyone found to do route nesting.
  • How should I my nesting? Which way do you think is best?

From this research I've found two ways to do the nesting, I'm working with react-router-dom.

1. React Router Docs Recommended Way

So according to React Router, doing all your routing on the same file is over, so your nesting now should be done by putting our nested routes inside the component.

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = () => (
  <div>
   <Route path="/topics/topic" component={Topic}/>
  </div>
)

const Topic = () => (
  <div>
   <h2>One Topic</h2>
  </div>
)

const BasicExample = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)
export default BasicExample

2. Putting it all in one place.

Looking around, people have found ways to do all the routing in one file, like on one of the links I refer to, but it has some drawbacks, for example, to use a "Not Found" page you need to user the Switch component, which is fine, but then if you nest you run into some problems like having to duplicate code. For example, this would work.

2.1 First Level Nesting

const MainLayout = ( {children} ) => (
  <div>
    <h2>Main Layout</h2>
    {children}
  </div>
);

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const FirstLevelNesting = () => (
  <Router>
      <MainLayout>
          <Switch>
              <Route exact path="/" component={Home}/>
              <Route path="/about" component={About}/>
              <Route component={NoMatch}/>
          </Switch>
      </MainLayout>
    </div>
  </Router>
);
export default FirstLevelNesting;

2.2 Second Level Nesting

Here you can see how to use a helper component to do the nesting on a second level, you can't do the nesting like on the first level, by putting a component like MainLayout inside the Switch because when the Switch reaches it, it will always match the path and we'll never get to NotFound, that's why we need to use a helper component to do the nesting, then again inside that component we also have to add a NotFound.

const NestedRoutes = () => (
    <div>
        <h2>This is my next nest</h2>
        <Switch>
            <Route exact path='/nextnest' component={Nest}/>
            <Route path='/nextnest/about' component={NestAbout}/>
            <Route component={NoMatch}/>
        </Switch>
    </div>
)

const SecondLevelNesting = () => (
  <Router>
      <MainLayout>
          <Switch>
              <Route exact path="/" component={Home}/>
              <Route path="/about" component={About}/>
              <Route path="/nextnest" component={NestedRoutes}
              <Route component={NoMatch}/>
          </Switch>
      </MainLayout>
    </div>
  </Router>
);
piptin
  • 314
  • 4
  • 14
  • Am stuck at a somewhat similar place without an answer. Seems RR v4 is not allowing me to declare routes of the same level in different files. This leads to some replicated code in my case. Would like to know if there is a way for me to achieve the above i.e declare routes like /login and then /home, /about etc in a different file like you have done for next route. But nothing renders if I just try the naive approach – kunal pareek Mar 05 '18 at 09:22
  • Yes, I believe all the routes at the same level have to be in the same file @kunalpareek I had some issues with routes at the same level as my app grew, I managed to solve some of the issues playing with the `exact` prop and with the order of the `Routes` inside the `Switch` statement – piptin Mar 06 '18 at 09:10
  • Yeah. Learned that the hard way. Should be more explicitly documented I think. But I also think I am not understanding the passing around of context properly, this seems like an artificial limitation. If Routes are components, I think they should be composable in many ways. Will share here if ever I get an insight. – kunal pareek Mar 07 '18 at 06:47

0 Answers0