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进行渲染。

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

1 个答案: