Перенаправить на другой компонент после отправки в реакции

Question

Я новичок в React. Я хочу перенаправить на другую страницу (другой компонент) с именем MainModule из формы входа в систему после нажатия кнопки отправки.

Это моя форма входа =>

import React, {Component} from "react";
import { withRouter} from 'react-router-dom';
import {Button,FormGroup,FormControl,FormLabel,Form} from "react-bootstrap";


class Login extends Component {
    constructor(props){
        super(props);

        this.state={
            email:"",
            password:""
        };
    }

    handelChange = event =>{
        this.setState({
            [event.target.id]:event.target.value  
        },()=>{

        });       

    }

    handelSubmit = event => {
        event.preventDefault();

        this.props.history.push('/MainModule');



    }

    render()
    {
        return (
            <div className="Login">
                <Form onSubmit={this.handelSubmit}>

                    <FormGroup controlId="email">
                        <FormLabel>Email</FormLabel>
                        <FormControl autoFocus type="email" value={this.state.email} onChange={this.handelChange}/>
                    </FormGroup>
                    <FormGroup controlId="password">
                        <FormLabel>Password</FormLabel>
                        <FormControl type="password" value={this.state.password} onChange={this.handelChange}/>
                    </FormGroup>

                    <Button type="submit">Login</Button>
                </Form>



            </div>
        )
    }
}

export default withRouter(Login);

но проблема заключается в том, что после нажатия кнопки отправки url меняется на MainModule, но форма MainMoudle не отображается, а просто показывает текущую форму входа. Я думаю, что для этого нужно определить маршрут для MainModule, и я не знаю как это сделать. Пожалуйста, помогите.

Обновление

Мои MainModules =>

import React from 'react';
import {  Route, Link,Switch,BrowserRouter } from "react-router-dom";
import allowance from './components/master/allowance';


class MainModule extends React.Component {
    // constructor(props){
    //   super(props)
    // }




    render(){
      return(
          <div className="mainform">
               <nav className="navbar navbar-expand-lg navbar-light bg-light">            
                <Link className="navbar-brand" to="/MainModule">TMS</Link>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div className="navbar-nav">
                        <Link className="nav-item nav-link" to={'/allowance'}>Allowance</Link>

                    </div>
                </div>
                </nav>

                <div id="maincontent">                 
                    <Route path='/allowance' component={allowance} />             
                </div>     
          </div>        
      )
    }
  }

  export default MainModule;

Answer 1

Вы правы, вам необходимо определить маршрут для компонента MainModule.

В вашем файле App.js , где, как я полагаю, вы настроили свои маршруты:

import React from "react"
import { BrowserRouter, Route } from "react-router-dom"
import Login from "/yourcomponentfolder/Login"
import MainModule from "/yourcomponentfolder/MainModule"

const App = () => {
   return(
      <BrowserRouter>
           <div>
               //Using exact tells react-router that you will only render this component if the URL matches exactly with the path definition.
               <Route path="/" component={Login} exact/>
               <Route path="/MainModule" component={MainModule}/>          
           </div>
      </BrowserRouter>
   )

}

Он довольно резок, вы используете компонент Route, для его рендеринга path и component для рендеринга.