Question

我正在尝试在我的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;

和history.js文件：

import createHistory from 'history/createBrowserHistory';

export default createHistory();

感谢您的帮助！

Answer 1

BrowserRouter不支持history属性。尝试使用react-router提供的history对象。直接从Route呈现的任何内容都将其作为属性。对于深度嵌套的组件，可以使用withRouter HOC。您将必须将此历史记录对象传递给logoutUser。

Sample code来自文档。

Answer 2

如果您使用的是history，而不是从库中导入Router，而不是BrowserRouter……

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;

Answer 3

如果从组件中的react-router-dom中使用withRouter来触发注销调用，则可以通过mapDispatchToProps的ownProps将历史记录传递给操作。这是我其中一个应用的示例。

组件：

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

Answer 4

由于我没有足够的代表进行投票或评论，我只想说 Lee O. 提供的答案非常有效。我正在使用 react-router-dom@5.2.0 与 .

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

Answer 5

我正在为React + Redux + Router v4编写一个新框架和saga（暂挂），您可以从此处逐步检查：https://github.com/liuxiaocong/react-base2019/blob/master/README.md

使用react-router-dom v4在Redux动作中重定向

5 个答案: