如何在 ReactRouter 4 中的组件之外导航？答案

【问题标题】：How to navigate outside of components in ReactRouter 4?如何在 ReactRouter 4 中的组件之外导航？
【发布时间】：2017-11-15 16:00:14
【问题描述】：

在 React Router (v3) 中，我可以接受服务器响应并使用 browserHistory.push 转到相应的响应页面。但是，这在 v4 中不可用，我不确定在 React-Router V4 中处理此问题的适当方法是什么。

在下面的示例中，当服务器返回成功时，用户将被带到购物车页面

//actions/index.js

export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
        dispatch({ type: types.AUTH_USER });
        localStorage.setItem('token', response.data.token);
        browserHistory.push('/cart'); // no longer in React Router V4
      });
}

如何从 React Router v4 中的函数重定向到页面？

在我需要从函数导航的情况下，我可以找到很多关于组件导航的参考

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

如果你想让程序路由到某个地方，使用 history 是最好的解决方案，这里的问题是如何获取组件中的 history 对象：

Route：使用 Route 渲染组件
WithRouter：包装组件：

class yourcomponent extends Component {}

withRouter()(你的组件)

如果您想在 Redux 中执行此操作，则可以尝试使用 React-Router-Redux

【讨论】：