React Router 4为所有路由呈现相同的组件

Question

So this question is more about the approach I should take to solve this problem.

I have a JSON like this

const app = [
  {
    tab: 'Home',
    // content: '<div>This is home</div>',
    nav: [
      {
        tab: 'Dashboard',
        content: '<div>This is Dashboard</div>'
      },
      {
        tab: 'Profile',
        content: '<div>This is Profile</div>'
      },
    ]
  },
  {
    tab: 'About',
    content: '<div>This is About</div>'
  },
  {
    tab: 'Pricing',
    content: '<div>This is Pricing</div>'
  },
];

Now what I would want is setup the entire routes and pages to render the above JSON.

Below is the pseudo code:

Approach 1...

Loop through and for each nav/subnav add Route.

import {
  BrowserRouter,
  Route,
  NavLink,
} from 'react-router-dom';


const Page = (content) => {
  return (
    <div>{content}</div>
  )
}

<BrowserRouter>
  app.map((nav, i) =>
    <NavLink key={nav.tab} to={`/${nav.tab}`} activeClassName="active">
      {nav.tab}
    </NavLink>
    <Route
      path={`/${nav.tab}`} render={(props) => (
        <Page {...props} pageData={nav.content}>
          if(nav.subNav) {
            nav.subNav.map((subnav, i) =>
              <NavLink key={subnav.tab} to={`/${nav.tab}/${subnav.tab}`} activeClassName="active">
                {nav.tab}
              </NavLink>
              <Route
                path={`/${nav.tab}/${subnav.tab}`} render={(props) => (
                  <Page {...props} pageData={subnav.content} />
                )}
              />
            )          
          }
        </Page>
      )}
    />
  )
</BrowserRouter>

Approach 2

Would something like this work/be better? Just have 2 routes returning same component, pass the app object to Page and then based on URL render the corresponding data

const Page = (app) => {
  return (
    // Loop over app
    if(mainNav from URL == tab) {
      if(subNav from URL == tab) {
        <div>{content}</div>
      }
    }

  )
}

<BrowserRouter>
  <Route
    path={'/:mainNav'} render={(props) => (
      <Page {...props} pageData={app} />
    )}
  />
  <Route
    path={'/:mainNav/:subNav'} render={(props) => (
      <Page {...props} pageData={app} />
    )}
  />
</BrowserRouter>

Thanks for reading through and appreciate your help. If theres another better approach I would love to know!

Answer 1

Try utilizing the exact prop offered in your <Route /> components.

<Route exact path="/foo" component={Foo} />

If you have the routes:

• /foo
• /foo/bar
• /foo/bar/baz

/foo matches in all three cases.