Javascript 在React JS中忘记密码

在我的登录页面中，我有一个按钮“忘记我的密码”， 我需要，当我点击这个按钮进入正确的页面

在我当前的代码中，当我单击“忘记密码”时，它会显示在登录下，这意味着在同一页面上，我会看到“登录”和“忘记密码”

我需要的只是看到“忘记我的密码”页面

这是我的密码：

import React from "react";
import ForgetPage from "../ForgetPasswrod/Forgotpass"
import {Link,useParams,  useRouteMatch,Route, Switch, BrowserRouter} from 'react-router-dom';

class Forget extends React.Component{

   Forget password -

render(){
  //  let  match = useRouteMatch();
    return(
        <div>

        <BrowserRouter>
        {" "} <Link to="/forgetPassword"  className="forget">Forgot password?</Link>
        <Switch>
          <Route  path="/forgetPassword" exact strict component={(ForgetPage)} />
        </Switch>
        </BrowserRouter>


        </div>);

}

}

export default Forget;

从“React”导入React；
从“./ForgetPassword/Forgotpass”导入伪造页面
从“react router dom”导入{Link，useParams，useRouteMatch，Route，Switch，BrowserRouter}；
类。组件{
忘记密码-
render（）{
//让match=useRouteMatch（）；
返回(
{“}忘记密码了吗？
);
}
}
输出默认值；

登录页面

import React from "react";
import Username from "./UserName";
import Password from "./Password";
import Submit from "./Submit";
import Rememberme from "./RememberMe";
import Cancel from "./Cancel";
import ForgetPass from "./Forget"

class Hub extends React.Component {


state={userName:"Log", password : "In"}

callbackUsername=(user)=>{
    this.setState({userName: user});
    console.log("---"+user)
}


callbackPassword = (pass) => {
     this.setState({ password: pass});
  }


render(){
return(
<div>
<h1> {this.state.userName} {this.state.password}</h1>
    <form className="modal-content animate">

        <Username userHub={this.callbackUsername}/>
        <Password passHub={this.callbackPassword}/>

        <Submit/>
        <Rememberme/>

        <div className="container">
            <Cancel/>     
        <ForgetPass/>


        </div>
    </form> 
</div>

);
}
}

export default Hub;

从“React”导入React；
从“/Username”导入用户名；
从“/Password”导入密码；
从“/Submit”导入提交；
从“/Rememberme”导入Rememberme；
从“/取消”导入取消；
从“/Forget”导入ForgetPass
类Hub扩展了React.Component{
状态={用户名：“日志”，密码：“在”}
callbackUsername=（用户）=>{
this.setState（{userName:user}）；
console.log（“--”+用户）
}
回拨密码=（通过）=>{
this.setState（{password:pass}）；
}
render（）{
返回(
{this.state.userName}{this.state.password}
);
}
}
导出默认集线器；

请尝试以下示例：

import React from "react";

export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {forgot: false};
    }

    login() {
        alert('Login will work here');
    }
    forgot() {
        this.setState({forgot: true})
    }

    render() {
        return (
            <div>
                {this.state.forgot === false && <div>
                    Username: <input/> <br/>
                    Password: <input/><br/>
                    <button onClick={this.forgot.bind(this)}>Forgot</button>
                    <button onClick={this.login.bind(this)}>Login</button>
                </div>}
                {this.state.forgot === true && <ForgotPassword/>}
            </div>
        );
    }
}

class ForgotPassword extends React.Component {

    reset() {
        alert('Password is sent to your email');
    }

    render() {
        return (<div><h1>Write your email</h1>
            <input/>
            <button onClick={this.reset.bind(this)}>Reset Password</button>

        </div>)
    }
}

从“React”导入React；
导出默认类登录扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={忘记：false}；
}
登录（）{
警报（“登录将在此处工作”）；
}
忘记（）{
this.setState（{忘记：true}）
}
render（）{
返回(
{this.state.forget==false&&
用户名：

密码：

忘记
登录
}
{this.state.forget==true&&}
);
}
}
类ForgotPassword扩展了React.Component{
重置（）{
警报（“密码已发送到您的电子邮件”）；
}
render（）{
回复（写电子邮件）
重置密码
)
}
}