自定义 React Router 渲染顺序

Posted 2023-02-21

【中文标题】自定义 React Router 渲染顺序

【英文标题】：Customize React Router Render Order

【发布时间】：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

【参考方案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