2016-03-31 09:40:55 +08:00
|
|
|
|
---
|
|
|
|
|
order: 2
|
2017-03-18 15:15:00 +08:00
|
|
|
|
iframe: 200
|
2016-07-21 11:48:56 +08:00
|
|
|
|
title:
|
2016-06-19 11:14:21 +08:00
|
|
|
|
zh-CN: 路由
|
|
|
|
|
en-US: React Router Integration
|
2016-03-31 09:40:55 +08:00
|
|
|
|
---
|
2015-07-02 17:22:26 +08:00
|
|
|
|
|
2016-06-19 11:14:21 +08:00
|
|
|
|
## zh-CN
|
|
|
|
|
|
2016-12-04 15:17:17 +08:00
|
|
|
|
和 `react-router@2+` 进行结合使用。
|
2015-07-02 17:22:26 +08:00
|
|
|
|
|
2016-06-19 11:14:21 +08:00
|
|
|
|
## en-US
|
|
|
|
|
|
2016-12-04 15:17:17 +08:00
|
|
|
|
Used together with `react-router@2+`.
|
2016-06-19 11:14:21 +08:00
|
|
|
|
|
2017-02-13 10:55:53 +08:00
|
|
|
|
````jsx
|
2016-06-12 14:14:55 +08:00
|
|
|
|
import { Router, Route, Link, hashHistory } from 'react-router';
|
2016-12-04 15:17:17 +08:00
|
|
|
|
import { Breadcrumb, Alert } 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>
|
2016-06-19 11:14:21 +08:00
|
|
|
|
<Link to="/apps/1">Application1</Link>:<Link to="/apps/1/detail">Detail</Link>
|
2016-06-11 16:20:19 +08:00
|
|
|
|
</li>
|
|
|
|
|
<li>
|
2016-06-19 11:14:21 +08:00
|
|
|
|
<Link to="/apps/2">Application2</Link>:<Link to="/apps/2/detail">Detail</Link>
|
2016-06-11 16:20:19 +08:00
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
);
|
2015-07-02 18:05:34 +08:00
|
|
|
|
|
2016-12-04 15:17:17 +08:00
|
|
|
|
const Home = ({ routes, params, children }) => (
|
2017-03-18 15:15:00 +08:00
|
|
|
|
<div className="demo">
|
2016-06-11 16:20:19 +08:00
|
|
|
|
<div className="demo-nav">
|
2016-06-19 11:14:21 +08:00
|
|
|
|
<Link to="/">Home</Link>
|
|
|
|
|
<Link to="/apps">Application List</Link>
|
2016-06-11 16:20:19 +08:00
|
|
|
|
</div>
|
2016-12-04 15:17:17 +08:00
|
|
|
|
{children || 'Home Page'}
|
|
|
|
|
<Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
|
|
|
|
|
<Breadcrumb routes={routes} params={params} />
|
2016-06-11 16:20:19 +08:00
|
|
|
|
</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}>
|
2016-06-19 11:14:21 +08:00
|
|
|
|
<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" />
|
2016-01-23 20:12:09 +08:00
|
|
|
|
</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
|
2017-03-18 15:15:00 +08:00
|
|
|
|
.demo {
|
|
|
|
|
margin: 16px;
|
2016-03-08 15:13:59 +08:00
|
|
|
|
}
|
2015-07-02 17:22:26 +08:00
|
|
|
|
.demo-nav {
|
|
|
|
|
height: 30px;
|
|
|
|
|
line-height: 30px;
|
2017-03-18 15:15:00 +08:00
|
|
|
|
margin-bottom: 16px;
|
2015-07-02 17:22:26 +08:00
|
|
|
|
background: #f8f8f8;
|
|
|
|
|
}
|
|
|
|
|
.demo-nav a {
|
|
|
|
|
line-height: 30px;
|
2017-03-18 15:15:00 +08:00
|
|
|
|
padding: 0 8px;
|
2015-07-02 18:05:34 +08:00
|
|
|
|
}
|
|
|
|
|
.app-list {
|
2017-03-18 15:15:00 +08:00
|
|
|
|
margin-top: 16px;
|
2015-07-02 17:22:26 +08:00
|
|
|
|
}
|
2016-03-08 15:13:59 +08:00
|
|
|
|
````
|