使用react、react router和redux实现面包屑

我在下面设计了动作和减速器：

// Action Types
const PUSH_BREADCRUMB = 'PUSH_BREADCRUMB';
const POP_BREADCRUMB = 'POP_BREADCRUMB';

// ActionCreator
const pushBreadcrumb = (payload: { text, link }) => ({
  type: PUSH_BREADCRUMB,
  payload
});
const popBreadcrumb = () => ({ type: PUSH_BREADCRUMB });

// Reducer
const initState = [
  { text: 'Home', link: '/' }
];
const breadcumbsReducer = (state = initState, action) => {
  switch (action.type) {
    case PUSH_BREADCRUMB:
      return [...state, action.payload];
    case POP_BREADCRUMB:
      return state.slice(0, state.length - 1);
    default:
      return state
  };
};

下面是我的组件和路由器： //…导入一些组件

// ...connect and map breadcrumbs
const Header = ({ breadcrumbs }) => {
  return (
    <ul>
      {breadcrumbs.map({ item, link } =>
        <li key={link}><Link to={link}>{text}</Link></li>
      )}
    </ul>
  );
};

ReactDOM.render(
  <Provider>
    <Router>
      <AppContainer>
        <Header />
        <Route exact path='/orders' component={OrderListContainer} />
        <Route path='/orders/:id' component={OrderDetailContainer} />
      </AppContainer>
    </Router>
  </Provider>,
  document.getElementById('root')
);

/…连接并映射面包屑
常量头=（{breadcrumbs}）=>{
返回(

{breadcrumbs.map（{item，link}=>
{text}
)}

);
};
ReactDOM.render(
,
document.getElementById（'root'））
);

然后：

• 在

  OrderListContainer#componenetWillMount

  和

  OrderDetailContainer#componenetWillMount

• 在

  OrderListContainer#组件将卸载
  和
  OrderDetailContainer#组件将卸载
  中调度
  popBreadcrumb
  

例外面包屑是

Home>Orders>Detail

但当我停留在

/orders/：id

并刷新页面时，它将是

主页>详细信息

---

是否有更好的方法使用redux实现面包屑？

这是因为刷新后状态会重置。您可以尝试使用实现您的解决方案-这将把选定的状态键保留到浏览器本地存储