React Router v6后代路由匹配失败，点击面包屑链接子组件不渲染

我想实现类似斯坦福大学页面的带面包屑导航的路径，仅在该页面内可访问3个子路径，因此使用了React Router v6的后代路由。面包屑组件已显示，但点击面包屑链接时子组件无法渲染，报错“No matching routes found /pathnameundefinedundefined”。以下是父组件和Publications组件代码，求帮忙排查是否链接使用错误。

父组件代码 #

import { Routes, Route, Link as RouterLink, useLocation } from "react-router-dom";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import "./sidebar-animation.css";

export default function Sidebar() {
  let location = useLocation();
  return (
    <div>
      <Box width='100%' minHeight='100vh'>
        <TransitionGroup>
          <CSSTransition key={location.pathname} classNames='fade' timeout={300} >
            <Routes location={location.pathname}>
              <Route path='/' element={<AboutUs />} />
              <Route path='publications/*' element={<Publications />} /> {/* 使用通配符 */}
            </Routes>
          </CSSTransition>
        </TransitionGroup>
      </Box>
    </div>
  );
}

Publications组件代码 #

import { Text, Box } from "@chakra-ui/react";
import { Link, Routes, Route, useLocation } from "react-router-dom";
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "@chakra-ui/react";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import FeatPublications from "./Featured Publications/featured-publications";
import JournalPublications from "./Journal Publications/journal-publications";

export default function Publications() {
  let location = useLocation();
  return (
    <div id='publications'>
      <Box textAlign='center' mt={10}>
        <Text fontSize='3xl' as='u' color='blue' fontFamily='Fjord One'>
          Publications
        </Text>
      </Box>
      <Box marginTop='6px' marginRight='6px'>
        <Breadcrumb fontWeight='medium' fontSize='sm'>
          <BreadcrumbItem isCurrentPage>
            <BreadcrumbLink as={Link} to='/featured-publications'> Journal Papers </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem>
            <BreadcrumbLink as={Link} to='/journal-publications'> Conference Proceedings </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem>
            <BreadcrumbLink as={Link} to='/featured-publications'> Book Contributions </BreadcrumbLink>
          </BreadcrumbItem>
        </Breadcrumb>
        <Box>
          <Routes>
            <Route path='featured-publications' element={<FeatPublications />} />
            <Route path='journal-publications' element={<JournalPublications />} />
          </Routes>
        </Box>
      </Box>
    </div>
  );
}

问题出在两个核心点，修改后即可正常渲染子组件：

1. 修正面包屑链接的路径写法 #

你当前用的是绝对路径（/featured-publications），但后代路由的子路径需要基于父路由/publications，应该使用相对路径（去掉开头的斜杠）。

修改后的面包屑代码：

<Breadcrumb fontWeight='medium' fontSize='sm'>
  <BreadcrumbItem>
    <BreadcrumbLink as={Link} to='featured-publications'>Journal Papers</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink as={Link} to='journal-publications'>Conference Proceedings</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink as={Link} to='book-contributions'>Book Contributions</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

注：第三个面包屑原路径重复了featured-publications，这里假设对应第三个子路径book-contributions，记得同步添加对应的Route组件。

2. 修正父组件Routes的location属性 #

父组件中<Routes location={location.pathname}>传的是路径字符串，但Routes组件需要接收完整的location对象，传字符串会导致路由解析异常，出现undefined报错。

修改后的父组件Routes部分：

<CSSTransition key={location.pathname} classNames='fade' timeout={300}>
  <Routes location={location}>
    <Route path='/' element={<AboutUs />} />
    <Route path='publications/*' element={<Publications />} />
  </Routes>
</CSSTransition>

额外优化：添加默认子路由 #

为了进入/publications页面时默认显示某个子组件，可在Publications的Routes中添加默认路由：

<Routes>
  <Route index element={<FeatPublications />} /> {/* 进入/publications时默认显示Featured Publications */}
  <Route path='featured-publications' element={<FeatPublications />} />
  <Route path='journal-publications' element={<JournalPublications />} />
  <Route path='book-contributions' element={<BookContributions />} /> {/* 第三个子组件 */}
</Routes>

内容的提问来源于stack exchange，提问作者tanjim anim