は、ルータのダイナミックナビゲーションパネル

Question

には、以下の画像を有し、そのそれぞれのHTML反応します。上位のメニューごとに、さまざまなサブメニューを用意したいとします。私がこれまで持っているルータを見てください：ナビゲーションビューにネストコンポーネントから来ているところで

<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：私は既に反応ルータのドキュメントを見てきました。

Answer 1

実際のルートの代わりにルートパラメータを使用することをお勧めします。

<Route path="work/:section"> 

したがって、sectionはジョブまたはプールである可能性があります。この変数はWorkComponentになり、その値に基づいて異なる結果が表示されます。

Answer 2

これは良い習慣であるならば、私は本当にわからないが、私は、次のアイデアが付属しています

輸出のデフォルト機能（小道具）{ のletサブメニュー。 props.locationから来

// 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.pathname