阵营路由器动态导航面板

具有下述图像，并且其相应的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

阵营路由器动态导航面板

回答

相关问题