Reactjs 使用react router dom v4在redux操作中重定向

我正在尝试在redux操作中将用户重定向到“/”路由。但我可以看到浏览器中的管线正在更改，但组件不会渲染（它保持在同一视图中）

我的行动是这样的：

import history from '../../history';

export const logoutUser = () => dispatch => {
  api.logout();
  // redirect
  history.push('/');

  dispatch({ type: TYPES.LOGOUT_USER });
};

import React, { Component, Fragment } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import history from './history';
import { Landing, AnotherComponent } from './views';


class App extends Component {
  render() {
    return (
      <Fragment>
        <Router history={history}>
          <div className="main-container">
            <Route exact path="/" component={Landing} />
            <Route path="/another_route" component={AnotherComponent} />
          </div>
        </Router>
      </Fragment>
    );
  }
}

export default App;

我的带有routes的组件如下所示：

import history from '../../history';

export const logoutUser = () => dispatch => {
  api.logout();
  // redirect
  history.push('/');

  dispatch({ type: TYPES.LOGOUT_USER });
};

import React, { Component, Fragment } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import history from './history';
import { Landing, AnotherComponent } from './views';


class App extends Component {
  render() {
    return (
      <Fragment>
        <Router history={history}>
          <div className="main-container">
            <Route exact path="/" component={Landing} />
            <Route path="/another_route" component={AnotherComponent} />
          </div>
        </Router>
      </Fragment>
    );
  }
}

export default App;

谢谢你的帮助

不支持

历史记录

属性。尝试使用react router提供的

历史记录

对象。直接从

Route

渲染的任何内容都将其作为属性获取。对于深度嵌套的组件，可以使用。 您必须将此历史记录对象传递给

logoutUser

---

从文档中。

如果您正在使用

历史

从库中导入

路由器

而不是

浏览器路由器

。。。大概是这样的：

import React, { Component } from 'react';
import { Router, Route, Switch } from 'react-router-dom';

import history from './history';
import { Landing, AnotherComponent } from './views';

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <div className="main-container">
            <Route exact path="/" component={Landing} />
            <Route path="/another_route" component={AnotherComponent} />
          </div>
        </Switch>
      </Router>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{Router，Route，Switch}；
从“./history”导入历史记录；
从“/views”导入{Landing，另一个组件}；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

如果您在触发注销调用的组件中使用react router dom中的With router，您可以通过mapDispatchToProps的自有道具将历史记录传递给您的操作。下面是我的一个应用程序的示例

组成部分：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    createTraining: training => dispatch(createTraining(training, ownProps)),
  };
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TrainingDetailsPage));

我的砰的一声：

export function createTraining(training, ownProps) {
  return function(dispatch) {
    return Api.createTraining(training).then(response => {
      ownProps.history.push('/trainings');
    });
  };
}

---

由于我没有足够的代表投票或发表评论，我只想说，由提供的答案工作得非常好。我正在使用反应路由器-dom@5.2.0有

---

我只想补充一个细节。如果相关组件已经在使用它们的父组件中，则导出组件时不需要添加withRouter和connect。

另一个选项是根据用于跟踪已验证状态的任何存储属性，有条件地从

react router dom呈现
组件。请等待直到您有足够的代表添加评论，而不是添加评论和答案。不会花很长时间的。