自定義反應路由器渲染順序

我遇到了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

自定義反應路由器渲染順序

回答

相關問題