title: Forget password in React JS
body: <p>In my <strong>log in</strong> page I have a button "Forget my password",
  I need, when I click in this button to go to the correct page.</p>
  
  <p>In my current code, when I click "forget my password", it shows under the login, which mean at the same page I see the "login" and the "forget password".</p>
  
  <p>What I need is to see just the  "forget my password" page.</p>
  
  <p>Here is my code :</p>
  
  <pre><code>
  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(
          &lt;div&gt;
  
          &lt;BrowserRouter&gt;
          {" "} &lt;Link to="/forgetPassword"  className="forget"&gt;Forgot password?&lt;/Link&gt;
          &lt;Switch&gt;
            &lt;Route  path="/forgetPassword" exact strict component={(ForgetPage)} /&gt;
          &lt;/Switch&gt;
          &lt;/BrowserRouter&gt;
  
  
          &lt;/div&gt;);
  
  }
  
  }
  
  export default Forget;
  
  </code></pre>
  
  <p>The page of log in </p>
  
  <pre><code>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)=&gt;{
      this.setState({userName: user});
      console.log("---"+user)
  }
  
  
  callbackPassword = (pass) =&gt; {
       this.setState({ password: pass});
    }
  
  
  render(){
  return(
  &lt;div&gt;
  &lt;h1&gt; {this.state.userName} {this.state.password}&lt;/h1&gt;
      &lt;form className="modal-content animate"&gt;
  
          &lt;Username userHub={this.callbackUsername}/&gt;
          &lt;Password passHub={this.callbackPassword}/&gt;
  
          &lt;Submit/&gt;
          &lt;Rememberme/&gt;
  
          &lt;div className="container"&gt;
              &lt;Cancel/&gt;     
          &lt;ForgetPass/&gt;
  
  
          &lt;/div&gt;
      &lt;/form&gt; 
  &lt;/div&gt;
  
  );
  }
  }
  
  export default Hub;
  </code></pre>