React router "context.router.transitionTo is not a function"

Question

I am using "react-router": "^4.2.0", "react-router-dom": "^4.2.2", All I am trying to do is when I submit form in one page it has to direct to the another defined page(component). Here is my code

FormValue.js

import React from "react";

class FormValues extends React.Component{
  gotoStore(e){
    e.preventDefault();
    let id = this.storeInput.value;
    this.context.router.transitionTo(`${id}`);
 }

render(){
    return (
            <form onSubmit={(e) => this.gotoStore(e)}>
                <input type="text" placeholder="enter your name" 
                 ref={(input) => {this.storeInput = input}}/>
                <button type="submit">Submit</button>
            </form>
    )
}
}

FormValues.contextTypes = {
 router: React.PropTypes.object
}

 export default FormValues;

index.js

  import React from "react";
  import { render } from 'react-dom';
  import {BrowserRouter, Route} from "react-router-dom";
  import ReactDom from "react-dom";
  import App from './App';
  import FormValues from './FormValues';

  const Root = () => {
   return (
    <BrowserRouter>
        <div>
            <Route path="/" exact component={FormValues}/>
            <Route path="/:id" exact component={App}/>

        </div>
    </BrowserRouter>
   )
  }

  ReactDom.render(<Root/>, document.getElementById('root'));

and I am getting error as enter image description here

any help would be appreciated

see this answer for navigating programatically, React doesn't recommend using context, https://stackoverflow.com/questions/44127739/programatically-navigate-using-react-router/44128108#44128108 — Shubham Khatri, Sep 23 '17 at 05:03
I recognize Wes Bos' "React for beginners" course here. Today I stumbled on the same issue, how did You solved yours? — Marecky, Nov 30 '17 at 21:44
this thread contains a lot of useful information about programmatically navigation https://stackoverflow.com/questions/42123261/programmatically-navigate-using-react-router-v4 — Steve.NayLinAung, Dec 30 '17 at 15:40

score 2 · Answer 1 · answered Dec 03 '17 at 15:19

2

My solution is:

import { PropTypes } from 'prop-types';

goToStore(e) {
 e.preventDefault();
 const storeId = this.storeInput.value;
 this.props.history.push(`store/${storeId}`);
}

StorePicker.contextTypes = {
  router: PropTypes.object
}

answered Dec 03 '17 at 15:19

Đạt Nguyễn Thành

31
6

score 0 · Answer 2 · answered Feb 21 '18 at 09:06

Since we can already access history under props, we don't even need to import PropTypes anymore. If you notice, when calling this.props.history we're not even touching the router context we declare later with PropTypes. Simply having the below code as is works:

goToStore(e) {
 e.preventDefault();
 const storeId = this.storeInput.value;
 this.props.history.push(`store/${storeId}`);
}

score 0 · Answer 3 · edited Sep 15 '18 at 21:06

0

import { PropTypes } from "prop-types";

  goToStore(event) {

     event.preventDefault();

     const storeId = this.storeInput.value;

     this.context.router.history.push(`/store/${storeId}`);

  };

  StorePicker.contextTypes = {

    router: function contextType(){

     return PropTypes.object;

    }
  }

edited Sep 15 '18 at 21:06

Dmitriy

5,525
12
25
38

answered Sep 15 '18 at 20:47

kach 234

1
2

React router "context.router.transitionTo is not a function"

3 Answers3