自定义渲染顺序

Question

我对React Router中路由的渲染顺序有问题。据我所知，任何子路由都将在其父路由之后进行渲染，因此将在DOM中的父路由之上进行渲染。

<代码>

我有这个路由器设置，但是在我从IndexRoute导航到/browse路由之后，浏览路由呈现在我的导航组件的顶部，我不能单击导航组件上的任何内容。

我的问题是如何强制Nav组件始终最后渲染，或者是否有更好的方法来构建我的应用程序以避免这种情况。

谢谢

Answer 1

将<代码>相对<代码>和<代码>绝对<代码>这样分开如何：

<Router>
    <Route path="/" component={Nav}>
        <IndexRoute component={IndexView} />
    </Route>
    <Route path="/browse" component={BrowseView} />
</Router>

Answer 2

您可以使用以下开关尝试此操作：

import { BrowserRouter, Route, Switch, browserHistory } from 'react-router-dom';

    <BrowserRouter history={browserHistory}>
          <div>
            <Route component={Nav} />
            <Switch>
              <Route path="/" component={IndexView} />
              <Route path="/browse" component={BrowseView}/>
            </Switch>
          </div>
        </BrowserRouter>

我建议您查看以下文档：

https://reacttraining.com/react-router/web/api/Switch

或者，您可以按照本教程进行操作：https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf