反应路由器 检查后如何推送到下一页

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

将其放在您尝试从中推送的组件中：

import { withRouter } from 'react-router'
...
export default withRouter(YourComponent);

并在组件中使用它进行推送：

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