reactjs - React-router-dom v4 のネストされたルートが機能しない

Question

未解決の質問に関して（最終的な結論として）

• react-router-dom v4 の複数のネストされたルート
• React Router v4でルートをネストする方法は?

私も同じ問題を抱えています。

https://reacttraining.com/react-router/web/guides/quick-startプロモートreact-router-dom

list down routesまた、コンポーネント内ではなく、1 つのファイル内に配置する方が適切です。

参照されるもの: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

何かが機能しています（ほとんど）：

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

何かが機能していない: 私が思うsite.com/SomeGarbagePath を示しています。<MainApp>
<Route path="*" component={PageNotFound}/>

アップデート

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