--- order: 3 iframe: 200 reactRouter: react-router-dom title: zh-CN: react-router V6 en-US: react-router V6 --- ## zh-CN 与 `react-router@6+` 结合使用,生成和路由绑定的面包屑。 ## en-US Used together with `react-router@6+`. ```jsx import { HashRouter, Route, Routes, Link, useLocation } from 'react-router-dom'; import { Breadcrumb, Alert } from 'antd'; const Apps = () => ( ); const breadcrumbNameMap = { '/apps': 'Application List', '/apps/1': 'Application1', '/apps/2': 'Application2', '/apps/1/detail': 'Detail', '/apps/2/detail': 'Detail', }; const Home = props => { const location = useLocation(); const pathSnippets = location.pathname.split('/').filter(i => i); const extraBreadcrumbItems = pathSnippets.map((_, index) => { const url = `/${pathSnippets.slice(0, index + 1).join('/')}`; return ( {breadcrumbNameMap[url]} ); }); const breadcrumbItems = [ Home , ].concat(extraBreadcrumbItems); return (
Home Application List
Home Page} /> {breadcrumbItems}
); }; ReactDOM.render( , mountNode, ); ``` ```css .demo { margin: 16px; } .demo-nav { height: 30px; margin-bottom: 16px; line-height: 30px; background: #f8f8f8; } .demo-nav a { padding: 0 8px; line-height: 30px; } .app-list { margin-top: 16px; } ```