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

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply