Invalid React-router-dom v4 nested routes

Question

Concerning an unresolved issue (as a final opinion)

• Multiple nested routes in action-router-dom v4 mode
• How to nest routes in React Router v4?

I also get the same problem.

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

In addition, people are better off finding list down routes in a single file rather than inside.

Something mentioned: 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 doesn't work: site.com/SomeGarbagePath shows <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 to do what you described (note that there are other ways to handle layouts directly in your React components). To simplify a simple example, other components ( <Home>, <List> , etc.) are created as purely functional components without any properties or states, but it would be trivial to put each into its own file as a proper React component. The example below is complete and will work.

 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 I hope is now described in your question:

• /login does not have a header or footer.
• / , /list and /settings all have headers and footers.
• Any route that is not found will display the PageNotFound component without a header or footer.

Answer 2

To be honest, I'm not quite sure what you are asking. I assume that you are trying to get the “Something's not working” example to work.

Something like that,

 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> )