react.js - 大神请进，react-router与面包屑的问题

问题描述

问 题

项目中面包屑用的antd里的<Breadcrumb />组件，与react-router配合形成这样的效果：

从列表页点击员工名称进入详情页：

员工列表 / 员工详情

但痛苦的是 路由是这样写的：

<Router history={ hashHistory } >
    <Route path="/" component={App} >
        <Route path="/list" breadcrumbName="员工列表" components={List} />
        <Route path="/list/detail/:id" breadcrumbName="员工详情" components={Detail} />
    </Route>
</Router>

上面路由带来的麻烦是面包屑只能显示员工列表或者员工详情，没办法显示员工列表 / 员工详情 。

如果将路由改成：

 <Router history={ hashHistory } >
    <Route path="/" component={App} >
        <Route path="/list" breadcrumbName="员工列表" components={List} >
            <Route path="detail/:id" breadcrumbName="员工详情" components={Detail} />
        </Route>
    </Route>
</Router>  

那么员工详情不会被渲染，需要在List中添加this.props.children，但是会渲染成下面的方式：

<List>
    <Detail />
</List>

我该如何修改才能让面包屑显示成员工列表 / 员工详情 ？？

解决方案

简单，看看官方的实例，写法是第二种。

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>
);

在有children的时候不显示当前组件的元素，比如你这就是不显示list。

这篇关于react.js - 大神请进，react-router与面包屑的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！