我得到Unhandled Rejection（TypeError）：router.transitionTo不是函数。什么可能是错的？

Question

当我填写详细信息并登录时，我收到错误

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

我在用 “react”：“^ 16.4.2”，“react-dom”：“^ 16.4.2”，“react-redux”：“^ 5.0.7”，“react-router”：“^ 4.3.1”， “react-router-dom”：“^ 4.3.1”，“react-scripts”：“1.1.4”，“redux”：“^ 4.0.0”，“redux-form”：“^ 7.4.2” ，

这是我的session.js（动作）

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

函数transitionTo不存在react-router / react-router-dom 4.x.您很可能正在寻找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存储属性为用户或登录状态，或者你确定auth状态变得真实，我假设当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));

希望这有帮助！