React's Routerの使用方法v4 history.push（）

Question

注：私はReact and Meteorの新機能を使用しています。

私はmeteorを使ってテキストを作成しようとしていますが、私が使用しているチュートリアルではReact v3を使用しています.v4でbrowserHistory.push（）を使用する方法を知りたいのですが、またはbrowserHistory.replace（）を使用して、別のページにユーザーを送信します。これまでは、自分の名前を好きなように設定してチャットページにリンクするページを作っています。私は、オンラインで多数の記事やドキュメントがあることを知っていますが、それらはすべてかなり複雑な例です。可能であれば、他のページに誰かをリダイレクトできる最も基本的な方法を教えてください。

SetName.js：

import React from "react"; 
import { BrowserRouter } from 'react-router-dom' 

export default class SetName extends React.Component{ 
    validateName(e){ 
     e.preventDefault(); 
     let name = this.refs.name.value; 
     if(name){ 
      console.log(name); 
     } 
     this.props.history.push('/asd') 
    } 
    render(){ 
     return(
      <div> 
       <form onSubmit={this.validateName.bind(this)}> 
        <h1>Enter a Name</h1> 
        <input ref="name" type="text"/> 
        <button>Go to Chat</button> 
       </form> 
      </div> 
     ) 
    } 
} 

main.js

import React from "react"; 
import ReactDOM from "react-dom"; 
import {Meteor} from "meteor/meteor"; 
import {Tracker} from "meteor/tracker"; 
import { BrowserRouter, Route, Switch } from 'react-router-dom' 

import {Texts} from "./../imports/api/Text"; 
import App from "./../imports/ui/App"; 
import Name from "./../imports/ui/Name"; 
import NotFound from "./../imports/ui/NotFound"; 
import SetName from "./../imports/ui/SetName"; 

Meteor.startup(() => { 
    Tracker.autorun(() => { 
     let texts = Texts.find().fetch(); 
     const routes = (
      <BrowserRouter> 
       <Switch> 
        <App path="/chat" texts={texts}/> 
        <SetName path="/setName" /> 
        <Route component={NotFound}/> 
       </Switch> 
      </BrowserRouter> 
     ); 
     ReactDOM.render(routes, document.getElementById("app")); 
    }); 
}); 

Answer 1

あなたはすでに、あなたは単にルータの履歴を取得するために次の操作を行うことができ、ルータ4を反応させる使用している場合あなたのコンポーネントで。ルータ内でコンポーネントをレンダリングしていることを確認してください。それ以外の場合は、別の方法でコンポーネントをレンダリングする必要があります。これを確認するには、this.props をコンポーネントに印刷します。それが歴史を持っているならば、そうでなければ次の論理を下から行います。あなたのコンポーネントがルータ内にない場合には

this.props.history.push('your routing location'). 

は、それは小道具としてあなたのコンポーネントで、ルータの歴史を注入し、次の

import { withRouter } from 'react-router'; 

... your react component 

export default withRouter(yourcomponent); 

この方法を実行します。