How to use React's Router v4 history.push() [duplicate]

问题

NOTE: I am fairly new to React and Meteor, so please be very specific when answering my question.

I am attempting to make a texting app using meteor and react, however, the tutorial I am using is using React v3 and I want to know how to do the same thing in v4 which is to use browserHistory.push() or browserHistory.replace() to send the user to another page. So far, I am doing a page where they can set their name to whatever they want, and then links them to the chat page. I know there are plenty of articles online and documentation on this but they are all in pretty complex examples. If you could, can you tell me the most basic way I can redirect someone to another page.

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"));
    });
});

回答1:

If you are already using react router 4, then you can simply do the following to get the router history in your component. Make sure you are rendering your component inside router, Otherwise you have to do it on different way.You can check this by printing this.props in your component. If it has history, then do the following otherwise do the next logic from below.

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

If your component is not inside the router, then do the following

import { withRouter } from 'react-router';

... your react component 

export default withRouter(yourcomponent);

this way it injects the router history in your component as a props.

来源：https://stackoverflow.com/questions/45666288/how-to-use-reacts-router-v4-history-push

标签

reactjs

meteor

react-router

react-router-v4