0

I have a large application which I am soon to be switching to react-router 1.x.

The application has a large nested navigation structure. 

/
 /page1
   /page1/option1
   /page1/option2
   /page1/option3
   /page1/option4
     /page1/option4/option1
     /page1/option4/option2
     /page1/option4/option3
 /page2
   /page2/option1
   /page2/option2
   /page2/option3
   /page2/option4

etc..

On /page1 my sub navigation would be:

Option1 | Option2 | Option 3 | Option 4

And on /page/option4

Option1 | Option2 | Option 3

I have been looking for a way to power a sub navigation components off the route config, so the pages would only need to be defined in one place, but so far have not been able to find an example. What would be the normal approach for such a problem, does such an example exist?

Update

So conceptually I'm thinking along the lines of a .net sitemap provider , where the navigation , breadcrumb trail and routing would work off a hierarchical definition of pages. I'm wondering if the route definition for react router can be the source, or can be driven from a different source, and how this would normally be achieved.

<Route path="/" component={App}>
      <Route path="page1" component={Page1}>
         <Route path="page1/option1" component={Page1Option1} />
         <Route path="page1/option2" component={Page1Option2} />
         <Route path="page1/option3" component={Page1Option3} />
     ...
Tom
  • 12,591
  • 13
  • 72
  • 112

1 Answers1

0

Is the sub navigation for /page1/option4 in your scenario in addition to the navigation for /page1?

If so, you could use a route's components configuration to pass an additional sub navigation component where required:

<Route path="option4" components={{main: Option4, subnav: Option4SubNav}}>
   ...child routes...
</Route>
Jonny Buchanan
  • 61,926
  • 17
  • 143
  • 150
  • Sure, if I want to have a reusable subnav component that would know that it should always display the children of the current page, is this possible? – Tom Oct 22 '15 at 14:20