title: React router "context.router.transitionTo is not a function"
body: <p>I am using 
  <strong>"react-router": "^4.2.0",
  "react-router-dom": "^4.2.2",</strong>
  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</p>
  
  <p><strong>FormValue.js</strong></p>
  
  <pre><code>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 (
              &lt;form onSubmit={(e) =&gt; this.gotoStore(e)}&gt;
                  &lt;input type="text" placeholder="enter your name" 
                   ref={(input) =&gt; {this.storeInput = input}}/&gt;
                  &lt;button type="submit"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
      )
  }
  }
  
  FormValues.contextTypes = {
   router: React.PropTypes.object
  }
  
   export default FormValues;
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>  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 = () =&gt; {
     return (
      &lt;BrowserRouter&gt;
          &lt;div&gt;
              &lt;Route path="/" exact component={FormValues}/&gt;
              &lt;Route path="/:id" exact component={App}/&gt;
  
          &lt;/div&gt;
      &lt;/BrowserRouter&gt;
     )
    }
  
    ReactDom.render(&lt;Root/&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>and I am getting error as <a href="https://i.stack.imgur.com/rLgRK.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>any help would be appreciated </p>