An example of a complete react router 4.0 nested route is as follows

react router 4.0 or above routing applications

In react routers below 4.0, nested routes can be placed in a router tag in the form as follows, and nested routes are also placed directly together.

<Route component={App}>
    <Route path="groups" components={Groups} />
    <Route path="users" components={Users}>
      <Route path="users/:userId" component={Profile} />
    </Route>
</Route>

However, after 4.0, the nested routes are completely different from the previous ones. They need to be placed separately in the nested root component to process the route, otherwise there will be warnings:

You should not use <Route component> and <Route children> in the same route

The correct form is as follows

<Route component={App}>
    <Route path="groups" components={Groups} />
    <Route path="users" components={Users}>
      //<Route path="users/:userId" component={Profile} />
    </Route>
</Route>

Comment out the nested route above

const Users = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Route path={`${}/:userId`} component={Profile}/>
  </div>
) 

Add a new route to the component that needs nested routes

An example of a complete nested route is as follows

Instructions and precautions

1. The following code is in ES6 format
2. react-router-dom version is 4.1.1
3. Please note that using history such as HashRouter, otherwise there will always be warning and cannot be rendered

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// import { Router, Route, Link, Switch } from 'react-router';
import {
  HashRouter,
  Route,
  Link,
  Switch
} from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {}

      </div>
    );
  }
}

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

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

const Message = ({ match }) => (
  <div>
    <h3>new messages</h3>
    <h3>{}</h3>
  </div>
)

const Inbox = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Route path={`${}/messages/:id`} component={Message}/>

  </div>
) 

(
  (<HashRouter>
    <App>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/inbox" component={Inbox} />
    </App>
  </HashRouter>),
  ('root')
);

refer to

• /questions/42845834/why-can-i-not-nest-route-components-in-react-router-4-x

• /tutorials/understanding-nested-routing-in-react–cms-27955