React routeur "context.router.transitionTo est pas une fonction"

Question

J'utilise "réagir-routeur": "^ 4.2.0", "réagir-routeur-dom": "^ 4.2.2", Tout ce que j'essaye de faire est quand je soumets le formulaire dans une page qu'il doit diriger à l'autre page définie (composant). Voici mon 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')); 

et je recevais erreur enter image description here

toute aide serait appréciée

Answer 1

Ma solution est:

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 
} 

Answer 2

Puisque nous pouvons déjà accéder history sous props, nous ne même pas besoin d'importer PropTypes plus. Si vous remarquez, lorsque vous appelez this.props.history, nous ne touchons même pas le contexte du routeur que nous déclarons plus tard avec PropTypes. Il suffit d'avoir le code ci-dessous tout comme des œuvres:

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