自定义 React Router 渲染顺序答案

【问题标题】：Customize React Router Render Order自定义 React Router 渲染顺序
【发布时间】：2016-03-30 09:35:52
【问题描述】：

我遇到了 React Router 中 Routes 的渲染顺序问题。据我了解，任何子路由都会在其父路由之后渲染，因此在 DOM 中渲染在其父路由之上。

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

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

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

谢谢！

【问题讨论】：

如果元素相互重叠（并阻止点击），这不是通过 CSS 解决的，在 Nav 组件上具有 z-index 属性吗？
成功了！谢谢@Ashley'CptLemming'Wilson

标签： reactjs react-router

【解决方案1】：

像这样拆分relative 和absolute 路由怎么样：

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

【讨论】：

【解决方案2】：

你可以用 switch 试试这个：

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

【讨论】：