使用动态内容时如何使用反应路由器更新 URL 路径？

Question

我试图弄清楚如何根据我的反应应用程序中的用户导航来更新我的页面 URL。我正在使用 Redux 和 React Router。

当用户登陆应用时，应用会通过 AJAX 从服务器加载数据。假设这是一个动物列表：

dog
cat
fish
pig
cow

我的路由器的结构是这样的（简化为重要部分）：

<div>
  <Provider store={store}>
    <Router history={hashHistory}>
      <Route path="/animal/:currentAnimal" component={ConnectedEntityStack} />
    </Router>
  </Provider>
</div>

用户可以左右滑动来找到不同的动物，或者直接在mywebsite.com/animal/dog找到动物。

目前我直接登陆动物工作..我有刷卡工作。但是，当我更改动物时，URL 不会更新。

当“路由”是动态值（而不是硬编码到路由器中）时，如何使用 react 路由器获取要更新的 URL？

Answer 1

如果你使用 react-router-redux，你可以通过这种方式更新 url：

import { push } from 'react-router-redux';

pushUrl = (newUrl) => {
  const { dispatch } = this.props;
  dispatch(push(newUrl));
}