リアクタルータ "context.router.transitionToは関数ではありません"

Question

私は "react-router"を使用しています： "^ 4.2.0"、 "react-router-dom"： "^ 4.2.2" 私がしようとしているのは、フォームを別のページ（コンポーネント）に送る必要があるということです。ここに私のコードは

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

と任意のヘルプは

をいただければ幸いです enter image description here

として、私はエラーを取得していますです

Answer 1

私のソリューションは、次のとおりです。

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

我々はすでにprops下historyにアクセスすることができますので、私たちも、もうPropTypesをインポートする必要はありません。通知した場合、this.props.historyに電話するときは、後でPropTypesと宣言するルータコンテキストには触れません。作品であると単純に以下のコードを持つ：

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