首页 文章

自定义React Router Render Order

提问于
浏览 次
0

我遇到了React Router中路由的呈现顺序问题 . 据我了解，任何儿童路线都会在父母之后呈现，因此在DOM中呈现在父母之上 .

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

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

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

谢谢！

reactjs react-router

2 回答

  • 1

    如何分割 relative 和 absolute 这样的路线：

    <Router>
    <Route path="/" component={Nav}>
        <IndexRoute component={IndexView} />
    </Route>
    <Route path="/browse" component={BrowseView} />
</Router>
    回复于
  • 1

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

    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

    回复于

相关问题