React Router DOM:无法将路由从/view/supview更改为/view

Question

我能够从/about导航到/portfolio。我可以转到/portfolio/subItem1或/portfolio/subItem2。我可以单击后退按钮返回/portfolio。但在任何子项路线上，我都无法点击导航链接前往/portfolio。

我怀疑存在某种路由错误，可能是在App组件上的顶级路由器和Portfolio组件上的子计算机之间。我使用的是react路由器dom 5.2.0。

// top level component
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 }
}

function App() {
return (
<OutermostStyleContainer>
<BrowserRouter>
<Nav bodyViews={bodyViews} />
<main>
<Switch>
<Route path='/about'><About /></Route>
<Route path='/contact'><Contact /></Route>
<Route path='/portfolio'><Portfolio /></Route>
<Route path='/' exact><Cover /></Route>
</Switch>
</main>
</BrowserRouter>
</OutermostStyleContainer>
);
}

// reduced portfolio component
interface PropsShape {}
export default (props: PropsShape) => {
return (
<BrowserRouter>
<section>
<Switch>
{/* Routes to sub-views */}
<Route path={`${useRouteMatch().path}/call-track-voipms`}>
<CallTrackVoipMs GithubLogo={GithubLogo} />
</Route>
{/* Nav links on category view */}
<ItemPreviews 
previewData={typeCheckedNavigationData} 
portfolioRoute={useRouteMatch().url} 
/>
</Switch>
</section>
</BrowserRouter>
)
}
// full Nav component
export default (props: PropsShape) => {
return (
<nav>
<div>
<LinkList jsxData={props.bodyViews} />
</div>
</nav>
)
}
// LinkList. NavList is a styled HOC of <ul>
export default (props: { jsxData: Record<string, ComponentData> }) => {
return (
<section>
<NavList>
{ Object.values(props.jsxData).map((nameAndSlug: ComponentData) => (
<SingleLinkListItem linkData={nameAndSlug} />
)) }
</NavList>
</section>
)
} 
// SingleListItem. StyledLink is as the name suggests
export default (props: { linkData: ComponentData }): JSX.Element => {
return (
<li>
<StyledLink to={props.linkData.slug}>{props.linkData.name}</StyledLink>
</li>
)
}

有人看到是什么导致了路由问题吗？

Answer 1

我认为不应该用<BrowserRouter>包装Portfolio组件。您应该只使用<BrowserRouter>包裹组件的顶部。并且只能使用<Switch>包裹子组件。

// reduced portfolio component
interface PropsShape {}
export default (props: PropsShape) => {
return (
<section>
<Switch>
{/* Routes to sub-views */}
<Route path={`${useRouteMatch().path}/call-track-voipms`}>
<CallTrackVoipMs GithubLogo={GithubLogo} />
</Route>
{/* Nav links on category view */}
<ItemPreviews 
previewData={typeCheckedNavigationData} 
portfolioRoute={useRouteMatch().url} 
/>
</Switch>
</section>
)
}