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';
|
2015-10-28 20:55:49 +08:00
|
|
|
|
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>
|
|
|
|
|
);
|
2015-07-02 18:05:34 +08:00
|
|
|
|
|
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={{
|
2016-04-21 11:36:51 +08:00
|
|
|
|
marginBottom: 15,
|
|
|
|
|
marginTop: 15,
|
|
|
|
|
paddingBottom: 15,
|
2016-05-11 09:32:33 +08:00
|
|
|
|
borderBottom: '1px dashed #ccc',
|
2016-06-06 13:54:10 +08:00
|
|
|
|
}}
|
2016-06-11 16:20:19 +08:00
|
|
|
|
>
|
|
|
|
|
点击上面的导航切换页面,面包屑在下面:
|
2016-04-21 11:36:51 +08:00
|
|
|
|
</div>
|
2016-06-11 16:20:19 +08:00
|
|
|
|
<Breadcrumb {...props} />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
2015-07-02 17:22:26 +08:00
|
|
|
|
|
2016-01-07 16:29:12 +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}>
|
2016-01-23 20:12:09 +08:00
|
|
|
|
<Route name="app" breadcrumbName="应用:id" path=":id">
|
|
|
|
|
<Route name="detail" breadcrumbName="详情" path="detail" />
|
|
|
|
|
</Route>
|
2015-08-20 19:52:56 +08:00
|
|
|
|
</Route>
|
2015-07-02 18:05:34 +08:00
|
|
|
|
</Route>
|
2015-08-20 19:52:56 +08:00
|
|
|
|
</Router>
|
2016-01-07 16:29:12 +08:00
|
|
|
|
, 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;
|
2015-07-02 18:05:34 +08:00
|
|
|
|
padding: 0 10px;
|
|
|
|
|
}
|
|
|
|
|
.app-list {
|
|
|
|
|
margin-top: 15px;
|
2015-07-02 17:22:26 +08:00
|
|
|
|
}
|
2016-03-08 15:13:59 +08:00
|
|
|
|
````
|