Reagieren Router dynamische Navigationsleiste

Question

folgendes Bild zu haben, und seine jeweiligen html:

menu

<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> 

Ich möchte der zweite Teil dynamisch sein. Nehmen wir an, für jedes obere Menü möchte ich verschiedene Untermenüs haben. Schauen Sie sich den Router habe ich bisher:

<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> 

By the way, ist die Navigation von einer Komponente kommt in Ansichten verschachtelt, ist es das in Ordnung? Denn jetzt habe ich diese Struktur:

structure

Welche Informationen sind willkommen. Vielen Dank im Voraus.

PD: Ich habe bereits die react-router docs durchlaufen.

Answer 1

Ich würde vorschlagen, dass Sie Route Params anstelle von tatsächlichen Routen verwenden.

<Route path="work/:section"> 

So könnte die section Jobs oder Pools sein. Sie können diese Variable in WorkComponent abrufen und verschiedene Ergebnisse basierend auf ihrem Wert rendern.

Answer 2

Ich bin nicht wirklich sicher, ob dies eine gute Praxis ist, aber ich bin gekommen, mit folgenden Idee:

Exportstandardfunktion (Requisiten) { let subMenu;

// 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> 
); 

Wo props.location herkommt: props.location.pathname