José Martos José Martos - 4 months ago 47
React JSX Question

React router dynamic navigation panel

Having the following image, and its respective 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 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>

I want the second part to be dynamic. Let's say for every upper menu I want to have various sub-menus. Look at the router I have so far:

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

By the way, the navigation is coming from a component nested in views, is it that okay? For now I have this structure:


Whatever information will be welcome. Thanks a lot in advance.

PD: I have already gone through the react-router docs.


I would suggest you to use route params instead of actual routes.

<Route path="work/:section">

So the section could be jobs or pools. You can get this variable in WorkComponent and render different results based on its value.