反應路由器：使用后代路由時沒有匹配的路由

Question

因此，我正在制作這個項目，我想將 go 指向具有面包屑組件的路徑。 在該組件中，我想聲明 3 個路徑，這些路徑只能在該頁面中訪問。 有點類似於此頁面：出版物 |斯坦福超聲成像與儀器實驗室 |斯坦福醫學。因此，我使用了反應路由器 v6 后代路由。 面包屑組件正在顯示，但每當我單擊任何面包屑鏈接時，子組件都不會呈現。 它給了我錯誤'找不到匹配的路由/pathnameundefinedundefined'這是我到目前為止所做的。（已聲明父元素的位置）

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 />} /> //used the wildcard

 </Routes>
 </CSSTransition>
 </TransitionGroup>
 </Box>
 </Box>
 </div>
  );
}

在出版物組件中

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>  
  );  
}  

我使用的鏈接錯誤嗎？ 需要一些幫助。

Answer 1

BreadcrumbLink中的參數值是錯誤的。 由於實際鏈接將是/publications path 后面的路徑，因為 Publications 下的路由是路徑/publications的后代。

<BreadcrumbLink as={Link} to='/publications/journal-publications'>  
              Conference Proceedings  
</BreadcrumbLink> 
<BreadcrumbLink as={Link} to='/publications/featured-publications'>  
              Book Contributions  
 </BreadcrumbLink>