Перенаправление в избыточном действии с использованием react-router-dom v4
Я пытаюсь перенаправить пользователя на маршрут «/» в моем действии с редукцией. Но я вижу, что маршрут в браузере меняется, но компонент не отображается (он остается в том же виде).
Мои действия выглядят так:
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();
Спасибо за помощь!
Ответы 4
БраузерРоутер не поддерживает свойство history. Попробуйте использовать объект history, предоставленный react-router. Все, что отображается непосредственно из Route, получает его как свойство. Для глубоко вложенного компонента вы можете использовать с маршрутизатором HOC.
Вам нужно будет передать этот объект истории в logoutUser.
Образец кода из документации.
Если вы используете 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;
Если вы используете withRouter из react-router-dom в своем компоненте, который инициирует вызов выхода из системы, вы можете передать историю своему действию через ownProps 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');
});
};
}
Поскольку у меня недостаточно представителей для голосования или комментариев, я просто хотел сказать, что ответ, предоставленный Ли О., работает отлично. Я использую [email protected] с .
Я просто хотел добавить одну деталь. Вам не нужно добавлять withRouter и соединение при экспорте компонента, если рассматриваемый компонент уже находится внутри родительского компонента, который их использует.
Пожалуйста, подождите, пока у вас не будет достаточно представителей, чтобы добавлять комментарии вместо добавления ответов на комментарии. Это не займет много времени.
Другой вариант — условно отображать компонент
<Redirect />изreact-router-domна основе любого свойства хранилища, которое вы используете для отслеживания статуса аутентификации.