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 ...

遍歷並為每個導航/子導航添加路由。

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條返回相同組件的路由，將app對象傳遞給Page，然后基於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在所有三種情況下都匹配。