Benjy Cui
8 years ago
4 changed files with 80 additions and 4 deletions
@ -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; |
|||
} |
|||
```` |
Loading…
Reference in new issue