mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 11:10:01 +08:00
fix: Breadcrumb should work with react-router@4
This commit is contained in:
parent
ebb3a7937a
commit
581040fc5d
75
components/breadcrumb/demo/router-4.md
Normal file
75
components/breadcrumb/demo/router-4.md
Normal file
@ -0,0 +1,75 @@
|
||||
---
|
||||
order: 3
|
||||
iframe: 200
|
||||
reactRouter: react-router-dom
|
||||
title:
|
||||
zh-CN: 路由
|
||||
en-US: React Router Integration
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
和 `react-router@4` 进行结合使用。
|
||||
|
||||
## en-US
|
||||
|
||||
Used together with `react-router@4`.
|
||||
|
||||
````jsx
|
||||
import { HashRouter as Router, Route, Link } from 'react-router-dom';
|
||||
import { Breadcrumb, Alert } from 'antd';
|
||||
|
||||
const Apps = () => (
|
||||
<ul className="app-list">
|
||||
<li>
|
||||
<Link to="/apps/1">Application1</Link>:<Link to="/apps/1/detail">Detail</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/apps/2">Application2</Link>:<Link to="/apps/2/detail">Detail</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
const Home = ({ routes, params, children }) => (
|
||||
<div className="demo">
|
||||
<div className="demo-nav">
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="/apps">Application List</Link>
|
||||
</div>
|
||||
{children || 'Home Page'}
|
||||
<Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
|
||||
<Breadcrumb routes={routes} params={params} />
|
||||
</div>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<Router>
|
||||
<Route name="home" breadcrumbName="Home" path="/" component={Home}>
|
||||
<Route name="apps" breadcrumbName="Application List" path="apps" component={Apps}>
|
||||
<Route name="app" breadcrumbName="Application:id" path=":id">
|
||||
<Route name="detail" breadcrumbName="Detail" path="detail" />
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
</Router>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.demo {
|
||||
margin: 16px;
|
||||
}
|
||||
.demo-nav {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 16px;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.demo-nav a {
|
||||
line-height: 30px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.app-list {
|
||||
margin-top: 16px;
|
||||
}
|
||||
````
|
@ -1,6 +1,7 @@
|
||||
---
|
||||
order: 2
|
||||
iframe: 200
|
||||
reactRouter: react-router
|
||||
title:
|
||||
zh-CN: 路由
|
||||
en-US: React Router Integration
|
||||
@ -8,11 +9,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
和 `react-router@2+` 进行结合使用。
|
||||
和 `react-router@2` `react-router@3` 进行结合使用。
|
||||
|
||||
## en-US
|
||||
|
||||
Used together with `react-router@2+`.
|
||||
Used together with `react-router@2` `react-router@3`.
|
||||
|
||||
````jsx
|
||||
import { Router, Route, Link, hashHistory } from 'react-router';
|
||||
|
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 3
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 分隔符
|
||||
en-US: Configuring the Separator
|
||||
|
@ -90,7 +90,7 @@
|
||||
"babel-preset-stage-0": "^6.16.0",
|
||||
"bezier-easing": "^2.0.3",
|
||||
"bisheng": "^0.23.0",
|
||||
"bisheng-plugin-antd": "^0.13.2",
|
||||
"bisheng-plugin-antd": "^0.15.0",
|
||||
"bisheng-plugin-description": "^0.1.1",
|
||||
"bisheng-plugin-react": "^0.5.0",
|
||||
"bisheng-plugin-toc": "^0.4.0",
|
||||
|
Loading…
Reference in New Issue
Block a user