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条路由返回相同的组件，将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 />组件中提供的exact prop。

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

如果您有路线：

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

/foo匹配所有三种情况。

React router 4为所有路由渲染相同的组件

1 个答案: