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

Posted 2023-02-21

【中文标题】使用 react-router-dom v4 在 redux 操作中重定向

【英文标题】：Redirect in redux action using react-router-dom v4

【发布时间】：2019-07-30 22:25:49

【问题描述】：

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

感谢您的帮助！

【问题讨论】：

另一种选择是根据您用于跟踪身份验证状态的任何商店属性，有条件地呈现来自 react-router-dom 的 <Redirect /> 组件。

【参考方案1】：

如果您在触发注销调用的组件中使用来自 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');
    );
  ;

【参考方案2】：

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

Sample code 来自文档。

【参考方案3】：

如果你使用的是history import Router not BrowserRouter from the lib... 像这样：

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;

【参考方案4】：

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

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

【讨论】：

请等到您有足够的代表来添加 cmets 而不是添加 cmets 答案。不会花很长时间。