React-router-dom v4 nested routes not working

Question

In reference to the unresolved question (as a final conclusion)

• Multiple Nested Routes in react-router-dom v4
• How to nest routes in React Router v4?

I am also getting the same issue.

https://reacttraining.com/react-router/web/guides/quick-start promotes react-router-dom

Also, people find better to list down routes in one file rather inside components.

Something referred: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

Something working (mostly):

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


export const Routes = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/login" component={Login}/>
        <MainApp path="/">
          <Route path="/list" component={List}/>
          <Route path="/settings" component={Settings}/>
        </MainApp>
        <Route path="*" component={PageNotFound}/>
      </Switch>
    </div>
  </Router>
)

Something not working: site.com/SomeGarbagePath shows the <MainApp> I think.
<Route path="*" component={PageNotFound}/>

Update

/ - Home - parent of all (almost)
/List - inside home
/Settings - inside home
/Login - standalone
/Users - inside home, For now just showing itself. It has further pages.
/User/123 - inside user with /:id
/User/staticUser - inside user with static route
/garbage - not a route defined (not working as expected)

Answer 1

This is one way of doing what you described (note there are other ways of handling layouts directly in your React Components). In order to keep the example simple, the other components (<Home>, <List> etc.) are created as purely functional components with no properties or state but it would be trivial to put each one in its own file as a proper React component. The example below is complete and will run.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

class App extends Component {
  render() {

    const Header = () => <h1>My header</h1>;
    const Footer = () => <h2>My footer</h2>;
    const Login = () => <p>Login Component</p>;    
    const Home = () => <p>Home Page</p>;
    const List = () => <p>List Page</p>;
    const Settings = () => <p>Settings Page</p>;
    const PageNotFound = () => <h1>Uh oh, not found!</h1>;

    const RouteWithLayout = ({ component, ...rest }) => {
      return (
        <div>
          <Header />
          <Route {...rest} render={ () => React.createElement(component) } />
          <Footer />
        </div>
      );
    };

    return (
      <Router>
        <div>
          <Switch>
            <Route exact path="/login" component={Login} />
            <RouteWithLayout exact path="/" component={Home} />
            <RouteWithLayout path="/list" component={List} />
            <RouteWithLayout path="/settings" component={Settings} />
            <Route path="*" component={PageNotFound} />
          </Switch>
        </div>
      </Router>    
    );
  }
}

export default App;

This will do the following, which is hopefully what is now described in your question:

1. /login has no header or footer.
2. /, /list, and /settings all have the header and footer.
3. Any route that is not found will display the PageNotFound component, with no header or footer.

Answer 2

I'll be honest, I'm not entirely sure what you're asking. I'm assuming you're trying to get your "Something not working" example to work.

Something like this,

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


export const Routes = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/login" component={Login}/>
        <MainApp path="/">
          <Switch>
            <Route path="/list" component={List}/>
            <Route path="/settings" component={Settings}/>
          </Switch>
        </MainApp>
        <Route component={PageNotFound} /> 
      </Switch>
    </div>
  </Router>
)