React-Router Как перейти на следующую страницу после проверок

Question

В моем коде у меня есть несколько проверок после того, как пользователь ввел некоторые данные, затем я хочу загрузить следующий маршрут, если все правильно, каков наилучший способ сделать это?

Это мойтекущая страница маршрута:

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

пользователь отправляет форму, после чего проверяются входные данные, и если все необходимые проверки пройдены, он должен загрузить страницу meetingMode

РЕДАКТИРОВАТЬ:

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

Похоже, вы забыли обернуть свой компонент в withRouter.Обязательно получите доступ к history prop

Поместите это в компонент, из которого вы пытаетесь нажать:

import { withRouter } from 'react-router'

...

export default withRouter(YourComponent);

И нажмите, используя это в вашем компоненте:

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