React router 4 рендерит один и тот же компонент для всех маршрутов

Question

Так что этот вопрос больше о подходе, который я должен использовать, чтобы решить эту проблему.

У меня есть такой JSON

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>'
  },
];

Теперь мне нужно настроить все маршруты и страницы для рендеринга вышеуказанного JSON.

Ниже псевдокод:

Подход 1 ...

Прокрутите и для каждого nav / subnav добавьте 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>

Подход 2

Будет ли что-то вроде этой работы / лучше? Просто сделайте 2 маршрута, возвращающих один и тот же компонент, передайте объект приложения на страницу, а затем на основе URL отобразите соответствующие данные

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>

Спасибо, что прочитали и ценим вашу помощь. Если есть другой лучший подход, я хотел бы знать!

Answer 1

Попробуйте использовать точную опору , предлагаемую в ваших <Route /> компонентах.

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

Если у вас есть маршруты:

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

/foo совпадает во всех трех случаях.