我收到 Unhandled Rejection (TypeError): router.transitionTo is not a function。什么可能是错的？

Question

当我填写详细信息并登录时出现错误

未处理的拒绝（TypeError）：router.transitionTo 不是函数

我正在使用
“反应”：“^16.4.2”， “反应域”：“^16.4.2”， "react-redux": "^5.0.7", “反应路由器”：“^4.3.1”， "react-router-dom": "^4.3.1", “反应脚本”：“1.1.4”， "redux": "^4.0.0", "redux-form": "^7.4.2",

这是我的 session.js(action)

import { reset } from 'redux-form';
import api from '../api';


function setCurrentUser(dispatch, response) {
    localStorage.setItem('token', JSON.stringify(response.meta.token));
    dispatch({ type: 'AUTHENTICATION_SUCCESS', response });
}

export function login(data, router) {
    return dispatch => api.post('/sessions', data)
        .then((response) => {
            setCurrentUser(dispatch, response);
            dispatch(reset('login'));
            router.transitionTo('/');
        });
}

export function signup(data, router) {
    return dispatch => api.post('/users', data)
        .then((response) => {
            setCurrentUser(dispatch, response);
            dispatch(reset('signup'));
            router.transitionTo('/');
        });
}

export function logout(router) {
    return dispatch => api.delete('/sessions')
        .then(() => {
            localStorage.removeItem('token');
            dispatch({ type: 'LOGOUT' });
            router.transitionTo('/login');
        });
}

这是我的 Login.js（容器）

import React, { Component} from 'react';
import { connect } from 'react-redux';
import PropTypes from "prop-types";
import { login } from '../../actions/session';
import LoginForm from '../../component/LoginForm';
import Navbar from '../../component/Navbar';


class Login extends Component {

  static contextTypes = {
    router: PropTypes.object,
  }

  handleLogin = data => this.props.login(data, this.context.router);

  render() {
    return (
      <div style={{ flex: "1" }}>
        <Navbar />
        <LoginForm onSubmit={this.handleLogin} />
      </div>
    );
  }
}

export default connect(null, { login })(Login);

Answer 1

react-router/react-router-dom 4.x 不存在函数 transitionTo。您很可能正在寻找 history push(somePath) 以编程方式导航。使用 react-router-dom 4.x+，您可以将 withRouter 与您连接的 Login 组件一起使用，以在组件的 props 上公开 history 以传递给您的 login 操作：

组件：

import { withRouter } from 'react-router-dom';

// ...

handleLogin = data => this.props.login(data, this.props.history);

// ...

export default withRouter(connect(null, { login })(Login)); 

动作：

export function login(data, history) {
  return dispatch => api.post('/sessions', data)
      .then((response) => {
          setCurrentUser(dispatch, response);
          dispatch(reset('login'));
          history.push('/');
      });
}

另一种方法是使用Redirect 组件与商店属性和withRouter 来触发Login 组件中的重定向。一旦映射的 redux 存储用户的属性或登录状态，或者您确定身份验证状态变为真，此示例将立即将用户重定向到路径“/”，我假设 dispatch({ type: 'AUTHENTICATION_SUCCESS', response }); 发生时。

import React, { Component} from 'react';
import { connect } from 'react-redux';
import { Redirect, withRouter } from 'react-router-dom';
import PropTypes from "prop-types";
import { login } from '../../actions/session';
import LoginForm from '../../component/LoginForm';
import Navbar from '../../component/Navbar';    

class Login extends Component {    
  static contextTypes = { router: PropTypes.object }

  handleLogin = data => this.props.login(data, this.context.router);

  render() {
    // check if user is logged in or doesn't need to see login
    if (this.props.user && this.props.isLoggedIn) {
      return <Redirect to="/" />;
    }

    return (
      <div style={{ flex: "1" }}>
        <Navbar />
        <LoginForm onSubmit={this.handleLogin} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  isLoggedIn: state.auth.isLoggedIn, // or however you store this type of value in your store, not critical if doesn't exist
  user: state.auth.user // or however you store this type of value in your store
});

export default withRouter(connect(mapStateToProps, { login })(Login));

希望对您有所帮助！