Javascript 提交表单后，如何重定向到React中的欢迎组件

在login.js中提交表单后，我想重定向到Welcome.js。我是新来的

Login.js

class Login extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            email : "",
            password : ""
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange(e){
        this.setState({
            ...this.state, [e.target.name] : e.target.value
        })
    }

    handleSubmit(e){
        e.preventDefault()
        alert("wow")
        this.setState({
            email : '',
            password : ''
        })
    }


    render(){
        console.log(this.state)
        return(
            <form onSubmit={this.handleSubmit}>

                <input 
                placeholder = "email"
                type = "text"
                name = "email"
                value = {this.state.email}
                onChange = {this.handleChange}
                />

                <input 
                placeholder = "password"
                type = "password"
                name = "password"
                value = {this.state.password}
                onChange = {this.handleChange}
                />

                <button 
                type="submit"
                >Log in</button>

            </form>
        )
    }
}

export default Login;

类登录扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
电邮：“，
密码：“
}
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
手变（e）{
这是我的国家({
…this.state[e.target.name]：e.target.value
})
}
handleSubmit（e）{
e、 预防默认值（）
警惕（“哇”）
这是我的国家({
电子邮件：“”，
密码：“”
})
}
render（）{
console.log（this.state）
返回(
登录
)
}
}
导出默认登录；

欢迎光临

import React from 'react'

const Welcome = () => {
    return(
        <div>
            <h2>Welome</h2>
        </div>
    )
}

export default Welcome;

从“React”导入React
const Welcome=（）=>{
返回(
韦洛姆
)
}
出口默认值欢迎；

这就是

React Router

的作用，您可以通过编程在应用程序中导航

npm i react-router-dom

然后用它来导航任何东西。例如：

    import { useHistory } from "react-router-dom";

    let history = useHistory(); 
    
    handleSubmit(e){
        e.preventDefault()
        alert("wow");
        history.push("/welcome")
        this.setState({
            email : '',
            password : ''
        });

    }

---

这就是

React Router

的作用，您可以通过编程在应用程序中导航

npm i react-router-dom

然后用它来导航任何东西。例如：

    import { useHistory } from "react-router-dom";

    let history = useHistory(); 
    
    handleSubmit(e){
        e.preventDefault()
        alert("wow");
        history.push("/welcome")
        this.setState({
            email : '',
            password : ''
        });

    }

---

您还可以根据状态有条件地显示不同的组件。

下面，我添加了一个新的“提交”状态，并在提交时将其设置为true。我根据“提交”状态有条件地返回不同的组件

if（this.state.submitted）返回

修改后的代码

class Login extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            email : "",
            password : "",
            submitted: false
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange(e){
        this.setState({
            ...this.state, [e.target.name] : e.target.value
        })
    }

    handleSubmit(e){
        e.preventDefault()
        alert("wow")
        this.setState({
            email : '',
            password : '',
            submitted: true
        })
    }


    render(){
        console.log(this.state)
        if (this.state.submitted) return <Welcome />

        return(
            <form onSubmit={this.handleSubmit}>

                <input 
                placeholder = "email"
                type = "text"
                name = "email"
                value = {this.state.email}
                onChange = {this.handleChange}
                />

                <input 
                placeholder = "password"
                type = "password"
                name = "password"
                value = {this.state.password}
                onChange = {this.handleChange}
                />

                <button 
                type="submit"
                >Log in</button>

            </form>
        )
    }
}

export default Login;

类登录扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
电邮：“，
密码：“”，
提交：假
}
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
手变（e）{
这是我的国家({
…this.state[e.target.name]：e.target.value
})
}
handleSubmit（e）{
e、 预防默认值（）
警惕（“哇”）
这是我的国家({
电子邮件：“”，
密码：“”，
提交：正确
})
}
render（）{
console.log（this.state）
如果（此.state.submitted）返回
返回(
登录
)
}
}
导出默认登录；

您还可以根据状态有条件地显示不同的组件。

下面，我添加了一个新的“提交”状态，并在提交时将其设置为true。我根据“提交”状态有条件地返回不同的组件

if（this.state.submitted）返回

修改后的代码

class Login extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            email : "",
            password : "",
            submitted: false
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange(e){
        this.setState({
            ...this.state, [e.target.name] : e.target.value
        })
    }

    handleSubmit(e){
        e.preventDefault()
        alert("wow")
        this.setState({
            email : '',
            password : '',
            submitted: true
        })
    }


    render(){
        console.log(this.state)
        if (this.state.submitted) return <Welcome />

        return(
            <form onSubmit={this.handleSubmit}>

                <input 
                placeholder = "email"
                type = "text"
                name = "email"
                value = {this.state.email}
                onChange = {this.handleChange}
                />

                <input 
                placeholder = "password"
                type = "password"
                name = "password"
                value = {this.state.password}
                onChange = {this.handleChange}
                />

                <button 
                type="submit"
                >Log in</button>

            </form>
        )
    }
}

export default Login;

类登录扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
电邮：“，
密码：“”，
提交：假
}
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
手变（e）{
这是我的国家({
…this.state[e.target.name]：e.target.value
})
}
handleSubmit（e）{
e、 预防默认值（）
警惕（“哇”）
这是我的国家({
电子邮件：“”，
密码：“”，
提交：正确
})
}
render（）{
console.log（this.state）
如果（此.state.submitted）返回
返回(
登录
)
}
}
导出默认登录；

你必须使用路由器来完成这项工作。你使用路由吗？…你能给我一些路由的原始资料吗@你能给我任何路由n react的原始资料吗@DennisVashhyes，试试谷歌，这是一个很好的资源你必须使用路由器来做这件事你使用路由吗？…你能给我一些路由的源材料吗@你能给我任何路由n react的原始资料吗@DennisVashYes，试试谷歌，这是一个很好的来源如果你离开了，组件卸载了，有必要清除状态吗？还应该注意，

useHistory

钩子只能在

Router

上下文中工作。。。我只是对这篇文章做了一个编辑来给出答案。你不需要这样做。如果你离开并且组件卸载，是否有必要清除状态？还应该注意，

useHistory

钩子只能在

Router

上下文中工作。。。我只是对这篇文章做了一个编辑来给出答案。你不需要那样做。