---
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 = () => (
-
Application1:Detail
-
Application2:Detail
);
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;
}
```