ant-design/components/breadcrumb/demo/router.md

76 lines
1.6 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 2
iframe: true
title: 路由
---
2015-07-02 17:22:26 +08:00
2016-02-17 16:42:26 +08:00
`react-router@2.x` 进行结合使用。
2015-07-02 17:22:26 +08:00
````jsx
2016-06-12 14:14:55 +08:00
import { Router, Route, Link, hashHistory } from 'react-router';
import { Breadcrumb } from 'antd';
2015-07-02 17:22:26 +08:00
2016-06-11 16:20:19 +08:00
const Apps = () => (
<ul className="app-list">
<li>
<Link to="/apps/1">应用1</Link><Link to="/apps/1/detail">详情</Link>
</li>
<li>
<Link to="/apps/2">应用2</Link><Link to="/apps/2/detail">详情</Link>
</li>
</ul>
);
2016-06-11 16:20:19 +08:00
const Home = (props) => (
<div>
<div className="demo-nav">
<Link to="/">首页</Link>
<Link to="/apps">应用列表</Link>
</div>
{props.children || 'Home'}
<div
style={{
marginBottom: 15,
marginTop: 15,
paddingBottom: 15,
2016-05-11 09:32:33 +08:00
borderBottom: '1px dashed #ccc',
}}
2016-06-11 16:20:19 +08:00
>
点击上面的导航切换页面,面包屑在下面:
</div>
2016-06-11 16:20:19 +08:00
<Breadcrumb {...props} />
</div>
);
2015-07-02 17:22:26 +08:00
ReactDOM.render(
2016-02-17 16:42:26 +08:00
<Router history={hashHistory}>
2015-12-07 11:19:08 +08:00
<Route name="home" breadcrumbName="首页" path="/" component={Home}>
2015-08-21 16:41:39 +08:00
<Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
<Route name="app" breadcrumbName="应用:id" path=":id">
<Route name="detail" breadcrumbName="详情" path="detail" />
</Route>
</Route>
</Route>
</Router>
, mountNode);
2015-07-02 17:22:26 +08:00
````
2016-03-08 15:13:59 +08:00
````css
#components-breadcrumb-demo-router iframe {
2016-03-30 20:37:17 +08:00
height: 180px;
2016-03-08 15:13:59 +08:00
}
2015-07-02 17:22:26 +08:00
.demo-nav {
height: 30px;
line-height: 30px;
margin-bottom: 15px;
background: #f8f8f8;
}
.demo-nav a {
line-height: 30px;
padding: 0 10px;
}
.app-list {
margin-top: 15px;
2015-07-02 17:22:26 +08:00
}
2016-03-08 15:13:59 +08:00
````