javascript - 我收到未处理的拒绝(类型错误): router.transitionTo 不是函数。可能出了什么问题？

Question

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

Unhandled Rejection (TypeError): router.transitionTo is not a function

我正在使用
“ react ”:“^16.4.2”， "react-dom": "^16.4.2", "react-redux": "^5.0.7", “ react 路由器”:“^4.3.1”， "react-router-dom": "^4.3.1", “ react 脚本”:“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));

希望有帮助!