时间戳

首页 > 解决方案 > 在反应中提交后重定向到另一个组件

reactjs - 在反应中提交后重定向到另一个组件

问题描述

我是 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 的路由，我不知道该怎么做。请帮忙。

更新

我的主要模块 =>

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;

标签： reactjsreact-router-dom

解决方案

你是对的，你必须为你的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来渲染。

推荐阅读