React Router 5.2.0:无法从子路由器路由单击到主路由器/基本路由

时间:2020-07-29 15:25:06

标签: reactjs react-router-dom

我可以从/about处的路由单击到/portfolio处的路由,也可以单击从/portfolio/portfolio/item1的路由。而且我可以使用“后退”按钮导航回到/portfolio

但是在/portfolio / portfolio / item2`上,我无法在导航菜单中单击/portfolio/item1' (or 路线。点击似乎被忽略了。

// App.tsx
const bodyViews: Record<string, ComponentData> = {
  cover: { name: "Home", slug: '/', component: Cover },
  portfolio: { name: "Portfolio", slug: "/portfolio", component: Portfolio },
  about: { name: "About", slug: '/about', component: About },
  contact: { name: "Contact", slug: '/contact', component: Contact }
}

// inside App.tsx return (
    <OutermostStyleContainer>
      <BrowserRouter>
        <Nav bodyViews={bodyViews} />

Nav组件中:

// Nav.tsx
export default (props: PropsShape) => {
  return (
    <nav>
      <div>
        <LinkList jsxData={props.bodyViews} />


// LinkList maps to return a series of SingleListItems, below
export default (props: { linkData: ComponentData }): JSX.Element => {
  return (
  <li>
    <Link to={props.linkData.slug}>{props.linkData.name}</Link>
  </li>
  )
}

这是通往“索引”投资组合视图的途径。我怀疑它有一个BrowserRouter分,但不确定,问题可能出在这里。


export default (props: PropsShape) => {

  return (
    <BrowserRouter>
      <section>
        <Switch>
          {/* Routes to sub-views */}
          <Route path={`${useRouteMatch().path}/call-track-voipms`}>
          // more routes removed

          {/* Nav links on category view */}
          <ItemPreviews 
            previewData={typeCheckedNavigationData} 
            portfolioRoute={useRouteMatch().url} 
          />
        </Switch>
      </section>
    </BrowserRouter>
  )
}

您知道为什么在该视图的子路径上无法点击指向Nav的{​​{1}}链接吗?

/portfolio

0 个答案:

没有答案