React-Router How to push to next page after checks

Question

In my code I have a few checks after a user has entered some data, then I want to load the next route if everything is correct, what is the best way to do so?

This is my current Route page:

        <Router history = {browserHistory}>
            <Route exact path="/" component={() => <MainMenu  userData={this.state.userData}/>}/>
            <Route exact path="/login"   component = {Login} />
            <Route exact path="/pastMeetingsPlay/:meetingCode"   component={(props) => <PastMeetingsPlay  user={this.state.userData.UserID} {...props}/>} />
            <Route exact path="/meetingMode/:meetingCode" component={(props) => <MeetingMode user={this.state.userData.UserID} {...props}/>} />
        </Router>

the user submits a form then there inputs are checked and if all the required checks pass then it should load meetingMode page

EDIT:

import React, { Component } from 'react';
import './App.css';

import MeetingMode from'./MeetingMode';
import NavbarMenu from './Navbar';
import Popup from "reactjs-popup";
import axios from 'axios';
import {withRouter, history, Redirect, Route} from "react-router";

 class MeetingModeLoad extends Component{
    constructor(props)
    {
        super(props);
        this.state ={
            meeting:{},
            value:0
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    async handleSubmit(event) 
    {
        event.preventDefault();
        let meetingLoadCode = this.state.value
        try{
        let getter = await axios.get(`https://smartnote1.azurewebsites.net/api/meetings/${meetingLoadCode}`)
        let meetingLocal = getter.data
        this.setState({meeting:meetingLocal})
        if(meetingLocal.Status == 2)
        {
            console.log("please join meeting that is planned or under going")
        }
        else
        {
            console.log("/meetingMode/" + this.state.meeting.MeetingID);
            this.props.history.push("/meetingMode/" + this.state.meeting.MeetingID)
        }
        }
        catch(error)
        {
            console.error(error)
        }
    }

    handleChange(event) 
    {
        this.state.value = event.target.value
        console.log(this.state.value)
    }
render()
{
    return(            
            <div>
                <Popup
                    trigger={<button className="meetingModeButton" onClick={() => this.handleClick}>Meeting Mode</button>}
                    modal
                    closeOnDocumentClick>
                        <div className="newNote">
                            <header style={{background: "#F7941D" }}> Meeting Mode</header>
                            <form onSubmit={this.handleSubmit}>
                            <label> Enter Meeting Code : 
                                <input type="text" name="type" className="inputBox"  onChange={this.handleChange}/>
                            </label>
                            <input type="submit" value="Submit" />
                            </form>
                        </div>
                        {console.log(this.state.meeting)}
                </Popup>  
            </div>
    )
}
}
export default withRouter (MeetingModeLoad)

Answer 1

Looks like you forgot to wrap your component into withRouter. It is mandatory to access the history prop

Place this in the component from which you try to push:

import { withRouter } from 'react-router'

...

export default withRouter(YourComponent);

And push by using this in your component:

this.props.history.push("/meetingMode/" + meetingCode);