如何在React Router v4中处理嵌套路由的找不到页面?

时间:2019-08-18 05:23:18

标签: reactjs react-router-v4 react-router-dom

我在我的应用程序中有2个不同的部分,第一部分是站点,另一部分是管理面板,在这种情况下,我已经嵌套了带有react router dom的路由,但是我无法处理找不到用于面板的url的页面;例如我想将/ dashboard / something重定向到未找到的页面 我的路由在下面:

<Switch>
    {/* portal */}
    <Route exact path='/' component={Portal} />
    <Route path="/landing" component={Portal} />
    <Route path="/login" component={Portal} />
    <Route path="/callback" component={Callback} />
    <Route path="/activation" component={Portal} />
    <Route path="/confirmation" component={Portal} />
    <Route path="/opportunities/:id" component={Portal} />
    <Route path='/panel' component={Portal} />
    <Route path='/electiondetails/:id' component={Portal} />
    <Route path='/errors' component={Portal} />
    {/* election panel */}
    <Route path='/electionpanel' component={Portal} />
    {/* dashboard */}
    <Route path='/dashboard' component={Index} />
    <Route path='/dashboard/login' component={Index} />
    <Route path='/dashboard/cartable/requests' component={Index} />
    <Route path='/dashboard/elections-management' component={Index} />
    {/* not found */}
    <Route path="/404" component={Portal} />
    <Redirect from="/**/" to="/404"></Redirect>
</Switch>

1 个答案:

答案 0 :(得分:3)

val disposable = mFriendRepository.getFriendList() .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribeWith(object: DisposableSingleObserver<BaseResponse>() { override fun onSuccess(response: BaseResponse) { Log.d("TEST", "onSuccess getFriendList") } override fun onError(e: Throwable) { Log.d("TEST", "onError getFriendList") } }) mCompositeDisposable.add(disposable) 始终与以下路由匹配:

/dashboard/something

因此,您将看到<Route path='/dashboard' component={Index} /> 组件。如果您需要通过这条路线并显示404页面,则应将其标记为Index

exact

此外,您无需重定向到该404页面,只需将<Route exact path='/dashboard' component={Index} /> 放到Route上即可:

替换

path

使用

<Route path="/404" component={Portal} />
<Redirect from="/**/" to="/404"></Redirect>