陣營路由器動態導航面板

具有下述圖像，並且其相應的HTML：陣營路由器動態導航面板

<nav className="navigation"> 
     <div className="navigation-first"> 
      <div className="navigation-container"> 
       <Link to="/" activeClassName="active">Dashboard</Link> 
       <Link to="/work" activeClassName="active">Work</Link> 
       <Link to="/profile" activeClassName="active">My profile</Link> 
       <Link to="/account" activeClassName="active">Account</Link> 
      </div> 
     </div> 
     <div className="navigation-second"> 
      <div className="navigation-container"> 
       <Link to="/work/jobs" activeClassName="active">Job search</Link> 
       <Link to="/work/pools" activeClassName="active">Talent pools</Link> 
      </div> 
     </div> 
    </nav>

我想的第二部分是動態的。比方說，我想爲每個上層菜單設置不同的子菜單。看看路由器我到目前爲止：

<Router history={browserHistory}> 
    <Route component={MainLayout}> 
     <Route path="/" component={Home} /> 
     <Route path="work"> 
      <Route path="jobs"> 
       <Route component={SearchLayoutContainer}> 
        <IndexRoute component={JobContainer} /> 
       </Route> 
      </Route> 
      <Route path="pools"> 
       <Route component={SearchLayoutContainer}> 
        <IndexRoute component={PoolContainer} /> 
       </Route> 
      </Route> 
     </Route> 
    </Route> 
</Router>

順便說一句，導航從嵌套在視圖中的組件來了，是不是這樣行不行？現在我有這樣的結構：

structure

任何信息將受到歡迎。提前致謝。

PD：我已經通過了react-router文檔。

來源

2016-08-24 José Martos

我建議你使用路由參數而不是實際的路由。

<Route path="work/:section">

因此section可能是作業或池。您可以在WorkComponent中獲得此變量，並根據其值顯示不同的結果。

來源

2016-08-24 19:39:18

嘿德米特里，謝謝您的回答。我想要實現的是，當點擊個人資料或帳戶時，例如，使導航的第二部分動態變化，並使用不同的元素。這可能是一個愚蠢的問題，但我只是在學習React，而且我需要爲我正在處理的單頁應用程序工作。 –

我真的不知道，如果這是一個很好的做法，但我已經跟以下想法：

出口默認功能（道具）{ 讓子菜單;

// Submenu 
if (props.location.indexOf("work") >= 0) { 
    subMenu = (
     <div className="navigation-second"> 
      <div className="navigation-container"> 
       <Link to="/work/jobs" activeClassName="active">Job search</Link> 
       <Link to="/work/pools" activeClassName="active">Talent pools</Link> 
      </div> 
     </div> 
    ) 
} else { 
    subMenu = (
     <div className="navigation-second"> 
      <div className="navigation-container"> 
       <Link to="/test" activeClassName="active">Test</Link> 
       <Link to="/test" activeClassName="active">Test</Link> 
       <Link to="/test" activeClassName="active">Test</Link> 
      </div> 
     </div> 
    ) 
} 

return (
    <nav className="navigation"> 
     <div className="navigation-first"> 
      <div className="navigation-container"> 
       <Link to="/" activeClassName="active">Dashboard</Link> 
       <Link to="/work" activeClassName="active">Work</Link> 
       <Link to="/profile" activeClassName="active">My profile</Link> 
       <Link to="/account" activeClassName="active">Account</Link> 
      </div> 
     </div> 
     {/* Submenu */} 
     {subMenu} 
    </nav> 
);

凡props.location來自：props.location.pathname

來源

2016-08-25 13:53:54

陣營路由器動態導航面板

回答

相關問題