IT技术 - 在 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;

登录页面

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;