Question

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

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

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

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

谢谢！

Answer 1

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

<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

自定义React Router Render Order

2 个答案: