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

• Nested Routes with Responsive Router v4 - Question
• React Router 4 Documentation
• Why can't I nest Route components in agent-router 4.x? - Question
• How to nest routes in React Router v4? - Question
• Getting Started with React Router v4 - Meteor Chef
• Simple Troubleshooting Tutorial v4
• Warning: you must not use it in the same route; <Route children>
  
  will be ignored - teamtreehouse
• React-router-dom v4 nested routes not working - Question

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

TL; DR

I found 2 ways to do nesting in React Router 4, each with advantages and disadvantages.

• Firstly. This is the recommended command react-router
  
  , the advantage is that the components Route
  
  are where they are loaded, but I have a hard time keeping track of the routing.

• Secondly. Manages somehow to do all the routing in one place, but there is duplicate code and unnecessary nesting level, adding a helper component, also I'm not sure if it's okay to do it this way.

So, these are the two paths I have found for nesting. I'm looking for:

• Any other way to detect route placement.
• How am I supposed to be in the nest? How do you think is best?

From this research, I found two ways to do nesting I am working with react-router-dom

.

1. Recommended Path to Router Recommendations

So, according to React Router, doing all your routing in one file is done, so your nesting should now be done by placing 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. All this in one place.

Looking around, people have found ways to do all the routing in one file, like on one of the links I link to, but it has some drawbacks like using the "Not Found" page you need a user component Switch

that is good but then if you nest you will run into some problems like code duplication. For example, this will 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 the helper component to create nesting in the second level, you cannot nest like in the first level by placing the component MainLayout

inside Switch

, because when it Switch

reaches that it will always match the path and we will never get to NotFound

so we need to use a helper component to do the nesting, and then again inside that component we also need to add 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>
);