react-router-dom v4 404 pageNotFound <Route path = "*" .../> 不起作用

Question

>我已经尝试了几种组合，但如果有任何路线被击中(未声明(，<Route path="*" component={PageNotFound}/>不会降落到PageNotFound，而是降落到我认为/。

是有其他方法还是我做了不正确的事情？该应用程序的其余部分似乎运行良好。

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>
          <Route path="/list" component={List}/>
          <Route path="/settings" component={Settings}/>
          <Switch>
            <User path="/user" >
              <Switch>
                <Route exact path="/user/staticUser" component={UserStatic} />
                <Route exact path="/user/:id" component={UserID} />
              </Switch>
            </User>
          </Switch>
        </MainApp>
        <Route path="*" component={PageNotFound}/>
      </Switch>
    </div>
  </Router>
)

更多信息：

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

使用 react-router-dom 软件包 (v4(

如果要在应用中的特定路由不匹配时呈现NoMatchFound组件，则只需指定一个没有路径的<Route>。

像这样的东西 - <Route component={NoMatch} />

下面是我的应用程序中的路由示例。

'

''

  <Router>
    <AppContainer>
      <Route component={Header} />
      <Switch>
        <Route exact path="/" component={MDashboard} />
        <Route path="/monitor/:groupId/:tab" component={Monitor} />
        <Route path="/monitor/:groupId" component={Monitor} />
        <Route exact path="/insights" component={IDashboard} />
        <Route component={NoMatch} />
      </Switch>
    </AppContainer>
  </Router>

'

''