我尝试了几种组合,但如果有任何路线被击中(未宣布),<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)
答案 0 :(得分:3)
使用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>
```