Переадресация в действии редукции с использованием response-router-dom v4 - PullRequest
Новая
       40

Переадресация в действии редукции с использованием response-router-dom v4

0 голосов
/ 08 марта 2019

Я пытаюсь перенаправить пользователя на маршрут '/' в моем действии приставки.Но я вижу, что маршрут в браузере меняется, но компонент не отображается (он остается в том же виде).

Мое действие выглядит так: 

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();

Спасибо за помощь!

Ответы [ 3 ]

0 голосов
/ 09 марта 2019

Если вы используете 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;
0 голосов
/ 09 марта 2019

Если вы используете withRouter изact-router-dom в своем компоненте, который инициирует вызов выхода из системы, вы можете передать историю своим действиям через ownProps mapDispatchToProps. Вот пример из одного из моих приложений.

Компонент: 

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

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

Мой Thunk: 

export function createTraining(training, ownProps) {
  return function(dispatch) {
    return Api.createTraining(training).then(response => {
      ownProps.history.push('/trainings');
    });
  };
}
0 голосов
/ 09 марта 2019

BrowserRouter не поддерживает history свойство. Попробуйте использовать объект history, предоставленный реагирующим маршрутизатором. Все, что визуализируется непосредственно из Route, получает его как свойство. Для глубоко вложенного компонента вы можете использовать withRouter HOC . Вам нужно будет передать этот исторический объект на logoutUser.

Пример кода из документации.

...