Wie benutze ich React's Router v4 history.push()

Question

HINWEIS: Ich bin ziemlich neu in React und Meteor, also bitte seien Sie sehr spezifisch, wenn Sie meine Frage beantworten.

Ich versuche, eine SMS App mit Meteor und reagieren, aber das Tutorial, das ich benutze ist React v3 und ich möchte wissen, wie das Gleiche in v4 zu tun, die browserHistory.push() verwenden oder browserHistory.replace(), um den Benutzer an eine andere Seite zu senden. Bis jetzt mache ich eine Seite, auf der sie ihren Namen einstellen können, was immer sie wollen, und verlinkt sie dann mit der Chat-Seite. Ich weiß, es gibt viele Artikel online und Dokumentation darüber, aber sie sind alle in ziemlich komplexen Beispielen. Wenn du könntest, kannst du mir am einfachsten sagen, wie ich jemanden auf eine andere Seite umleiten kann.

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

Wenn Sie bereits reagieren verwenden Router 4, dann können Sie einfach Sie wie folgt vor den Router Geschichte zu bekommen in deiner Komponente. Stellen Sie sicher, dass Sie Ihre Komponente innerhalb des Routers rendern, andernfalls müssen Sie es auf andere Weise tun. Sie können dies überprüfen, indem Sie this.props in Ihrer Komponente drucken. Wenn es Geschichte hat, dann mache das folgende, ansonsten mach die nächste Logik von unten.

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

Wenn Ihre Komponente nicht innerhalb des Routers ist, dann gehen Sie wie folgt

import { withRouter } from 'react-router'; 

... your react component 

export default withRouter(yourcomponent); 

auf diese Weise den Router Geschichte in Ihrer Komponente als Requisiten einspritzt.