I am getting Unhandled Rejection (TypeError): router.transitionTo is not a function. What could possibly be wrong?

Question

When I fill the details and Sign in I get the error

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

I am using
"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",

This is my 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');
        });
}

This is my Login.js(container)

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);

`transitionTo` simply does not exist for react-router/react-router-dom 4.x — Alexander Staroselsky, Sep 06 '18 at 18:12
I'd recommend the [Redirect](https://reacttraining.com/react-router/web/api/Redirect) in the markup based store properties/values, but check out this [question](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router). You probably won't be navigating from redux actions and instead would be doing this in the component. — Alexander Staroselsky, Sep 06 '18 at 18:19

Alexander Staroselsky · Answer 1 · 2018-09-07T00:46:33.930

Function transitionTo does not exist for react-router/react-router-dom 4.x. You are most likely looking for history push(somePath) to navigate programmatically. With react-router-dom 4.x+, you can use withRouter with your connected Login component to expose history on the component's props to pass to your login action:

Component:

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

// ...

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

// ...

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

Actions:

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

Another approach could be using the Redirect component in combination with store properties and withRouter to trigger a redirect in your Login component. This example would immediately redirect the user to path "/" once the mapped redux store properties for user or log in status or however you identify that auth status becomes truthy, I assume when dispatch({ type: 'AUTHENTICATION_SUCCESS', response }); occurs.

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));

Hopefully that helps!

I am getting Unhandled Rejection (TypeError): router.transitionTo is not a function. What could possibly be wrong?

1 Answers1