reactjs - Rendering sub navigation using react router routes and a shared data source -


i have large application switching react-router 1.x.

the application has 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 sub navigation be:

option1 | option2 | option 3 | option 4

and on /page/option4

option1 | option2 | option 3

i have been looking way power sub navigation components off route config, pages need defined in 1 place, far have not been able find example. normal approach such problem, such example exist?

update

so conceptually i'm thinking along lines of .net sitemap provider , navigation , breadcrumb trail , routing work off hierarchical definition of pages. i'm wondering if route definition react router can source, or can driven different source, , how 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} />      ... 

is sub navigation /page1/option4 in scenario in addition to navigation /page1?

if so, use route's components configuration pass additional sub navigation component required:

<route path="option4" components={{main: option4, subnav: option4subnav}}>    ...child routes... </route> 

Comments

Popular posts from this blog

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

How to show in django cms breadcrumbs full path? -

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -