自定义反应路由器渲染顺序

我遇到了React路由器中路由的渲染顺序问题。据我了解，任何儿童路线都会在他们的父母后面呈现，因此会在父母身上呈现在DOM之上。自定义反应路由器渲染顺序

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

我有这样的路由器设置，但之后我从IndexRoute导航到/浏览路径，浏览路径呈现在我的导航组件之上，我不能点击导航组件什么。

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

谢谢！

来源

2015-12-23 Andrew Wong

如果你有相互出现的元素（并防止点击）不是通过在'Nav'组件上具有'z-index'属性的CSS解决的？ –

做到了！谢谢@ Ashley'CptLemming'Wilson –

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

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

来源

2015-12-25 16:14:59 user2443984

你可以试试这个用开关：

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

或者你可以关注t他的教程：https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

来源

2017-11-06 00:27:25

自定义反应路由器渲染顺序

回答

相关问题