[英]React router: no matching routes when using descendent routes
So I am making this project where I want to go to a path which has a breadcrumb component.因此,我正在制作这个项目,我想将 go 指向具有面包屑组件的路径。 And in that component I want to declare 3 paths which is accessible only in that page.在该组件中,我想声明 3 个路径,这些路径只能在该页面中访问。 kinda similar to this page: Publications |有点类似于此页面:出版物 |Stanford Ultrasound Imaging & Instrumentation Lab |斯坦福超声成像与仪器实验室 |Stanford Medicine .So for that I used react router v6 descendent routes.斯坦福医学。因此,我使用了反应路由器 v6 后代路由。 The breadcrumb component is showing but whenever I click any of the breadcrumb links, the child component is not rendering.面包屑组件正在显示,但每当我单击任何面包屑链接时,子组件都不会呈现。 It is giving me the error 'No matching routes found /pathnameundefinedundefined'Here is what I have done so far.(where the parent element has been declared)它给了我错误'找不到匹配的路由/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>
);
}
and in the publications component在出版物组件中
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>
);
}
Am I using the link wrong?我使用的链接错误吗? Need some help regarding this.需要一些帮助。
The value of argument to in the BreadcrumbLink is wrong. BreadcrumbLink中的参数值是错误的。 As actual link will be the path followed by /publications path because the route under publications is descendants of path /publications .由于实际链接将是/publications path 后面的路径,因为 Publications 下的路由是路径/publications的后代。
<BreadcrumbLink as={Link} to='/publications/journal-publications'>
Conference Proceedings
</BreadcrumbLink>
<BreadcrumbLink as={Link} to='/publications/featured-publications'>
Book Contributions
</BreadcrumbLink>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.