mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 11:32:52 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

docs: add demo for react-router@4, close: #5644

Browse Source
This commit is contained in:
Benjy Cui 2017-06-16 14:57:14 +08:00
parent 55d6d420bf
commit 88ee7b3e8e
2 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
components/breadcrumb/demo/router-4.md
View File

@ -3,20 +3,20 @@ order: 3
iframe: 200 iframe: 200
reactRouter: react-router-dom reactRouter: react-router-dom
title: title:
zh-CN: 路由 zh-CN: 其它路由
en-US: React Router Integration en-US: Other Router Integration
--- ---
## zh-CN ## zh-CN
和 `react-router@4` 进行结合使用。 和 `react-router@4`，或其他路由进行结合使用。
## en-US ## en-US
Used together with `react-router@4`. Used together with `react-router@4` or other router.
````jsx ````jsx
import { HashRouter as Router, Route, Link } from 'react-router-dom'; import { HashRouter as Router, Route, Switch, Link, withRouter } from 'react-router-dom';
import { Breadcrumb, Alert } from 'antd'; import { Breadcrumb, Alert } from 'antd';
const Apps = () => ( const Apps = () => (
@ -30,27 +30,52 @@ const Apps = () => (
</ul> </ul>
); );
const Home = ({ routes, params, children }) => ( const breadcrumbNameMap = {
<div className="demo"> '/apps': 'Application List',
<div className="demo-nav"> '/apps/1': 'Application1',
'/apps/2': 'Application2',
'/apps/1/detail': 'Detail',
'/apps/2/detail': 'Detail',
};
const Home = withRouter((props) => {
const { location } = props;
const pathSnippets = location.pathname.split('/').filter(i => i);
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
return (
<Breadcrumb.Item key={url}>
<Link to={url}>
{breadcrumbNameMap[url]}
</Link>
</Breadcrumb.Item>
);
});
const breadcrumbItems = [(
<Breadcrumb.Item key="home">
<Link to="/">Home</Link> <Link to="/">Home</Link>
<Link to="/apps">Application List</Link> </Breadcrumb.Item>
)].concat(extraBreadcrumbItems);
return (
<div className="demo">
<div className="demo-nav">
<Link to="/">Home</Link>
<Link to="/apps">Application List</Link>
</div>
<Switch>
<Route path="/apps" component={Apps} />
<Route render={() => <span>Home Page</span>} />
</Switch>
<Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
<Breadcrumb>
{breadcrumbItems}
</Breadcrumb>
</div> </div>
{children || 'Home Page'} );
<Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" /> });
<Breadcrumb routes={routes} params={params} />
</div>
);
ReactDOM.render( ReactDOM.render(
<Router> <Router>
<Route name="home" breadcrumbName="Home" path="/" component={Home}> <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> </Router>
, mountNode); , mountNode);
```` ````

2
components/breadcrumb/demo/router.md
View File

@ -3,7 +3,7 @@ order: 2
iframe: 200 iframe: 200
reactRouter: react-router reactRouter: react-router
title: title:
zh-CN: 路由 zh-CN: react-router
en-US: React Router Integration en-US: React Router Integration
--- ---