title: is there any way to stick on the same page even after refreshing in react router?
body: <p>Hi am new to react and facing a problem in react router . Actually am using useNavigate in react router dom for navigation and everything is working fine but my problem is suppose initially i am on page one then using useNavigate in am reaching to page two then from page two to page 3. Now when am refreshing the page everything is getting started with page 1 again but,  what i want  is if am on page 3 then on refreshing must be on page 3 is there any way to achieve it.</p>
  <p>for example i am using two pages (my goal is if i am on 2nd page on refresh i must be on 2nd page) but for current situation browser is starting from first page</p>
  <p>i am writing my first page like this</p>
  <pre><code>import react from &quot;react&quot;;
  import &quot;../../../../css/panel/articleverificationpanel/topmostTray.css&quot;;
  import axios from &quot;axios&quot;;
  import { useNavigate } from 'react-router-dom'
  
  class MainLoginAreaForPanel extends react.Component {
    goButtonClicked =() =&gt; {
      try {
        const userId = document.getElementById(&quot;userId&quot;).value;
        const password = document.getElementById(&quot;password&quot;).value;
        const securityKey = document.getElementById(&quot;securityKey&quot;).value;
        console.log(userId, password, securityKey);
        const data = {
          userId,
          password,
          securityKey,
        };
        axios
          .post(
            `http://localhost:4000/app/panel/articleverification/signin`,
            data
          )
          .then((res) =&gt; {
            // means file has been uploaded
            if (res.data.success === 1) {
              console.log(this.props)
              this.props.authorizeUser(true,{})
              this.props.navigation('/panel/articleverification/homepage',{replace:true})
              
            } else {
              throw new Error('Sorry could not verify you');
            }
            
          })
          .catch((error) =&gt; {
            alert(error.message);
          });
      } catch (error) {
        alert(error.message);
      }
    }
    render() {
      return (
        &lt;react.Fragment&gt;
          &lt;div id=&quot;mainLoginPanelArea&quot;&gt;
            &lt;label htmlFor=&quot;userId&quot; className=&quot;children&quot;&gt;
              User id:
            &lt;/label&gt;
            {&quot;   &quot;}
            &lt;input type=&quot;text&quot; id=&quot;userId&quot; name=&quot;userId&quot; className=&quot;children&quot; /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;label htmlFor=&quot;password&quot;&gt;Password:&lt;/label&gt;
            {&quot;   &quot;}
            &lt;input type=&quot;text&quot; id=&quot;password&quot; name=&quot;password&quot; /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;label htmlFor=&quot;securityKey&quot;&gt;Security Key:&lt;/label&gt;
            {&quot;   &quot;}
            &lt;input type=&quot;text&quot; id=&quot;securityKey&quot; name=&quot;securityKey&quot; /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;button className=&quot;btn&quot; onClick={this.goButtonClicked}&gt;
              GO
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/react.Fragment&gt;
      );
    }
  }
  
  // Wrap and export
  export default function(props) {
    const navigation = useNavigate();
  
    return &lt;MainLoginAreaForPanel {...props} navigation={navigation} /&gt;;
  }
  
  </code></pre>
  <p>this is how i am writing my second page</p>
  <pre><code>import react from &quot;react&quot;;
  import TopmostTrayForPanel from &quot;./topmostTray&quot;;
  import CardForPanel from &quot;./cardForPanel&quot;;
  import {Navigate,useNavigate} from 'react-router-dom'
  import axios from &quot;axios&quot;;
  
  class HomePageForArticalVerificationPanel extends react.Component {
    state = {
      data: [],
    };
    openArticle = (articleId) =&gt; {
      this.props.navigation('/panel/articleverification/articlepage',{replace:true,state:
        {articleId:articleId}
      })
    }
    componentDidMount() {
      console.log(&quot;loaded&quot;);
      this.getUnverifiedArticles();
    }
    
    getUnverifiedArticles() {
      let data = [];
      let cnt = 0;
      let temp = [];
      axios
      .get(
        `http://localhost:4000/app/panel/articleverification/getunverifiedarticles`,
        data
      )
      .then((res) =&gt; {
        
        console.log(res)
        if (res.data.success === 1) {
          const articles = res.data.data.articles 
          for (let i = 0; i &lt; articles.length; i++) {
            if (cnt &gt; 2) {
              data.push(&lt;div className=&quot;row&quot; key={`extra${i}`}&gt;{temp}&lt;/div&gt;);
              cnt = 0;
              temp = [];
            }
            if (cnt &lt;= 2) {
              temp.push(
                &lt;div className=&quot;col-sm&quot; key={i}&gt;
                  &lt;CardForPanel title={articles[i].title} tags={articles[i].tags} aid={articles[i].aid} openArticle={this.openArticle}&gt;&lt;/CardForPanel&gt;
                &lt;/div&gt;
              );
              cnt++;
            }
            
          }
          if(temp.length !=0){
              data.push(&lt;div className=&quot;row&quot; key={`last one`}&gt;{temp}&lt;/div&gt;);
          }
          this.setState({
            data: data,
          });
        } else {
          throw new Error('Sorry could not verify you');
        }
        
      })
      .catch((error) =&gt; {
        alert(error.message);
      });
      
    }
    render() {
      if (this.props.authorized) {
        return (
        
          &lt;div className=&quot;parent_container&quot;&gt;
            &lt;TopmostTrayForPanel&gt;&lt;/TopmostTrayForPanel&gt;
            &lt;div className=&quot;container&quot;&gt;{this.state.data}&lt;/div&gt;
          &lt;/div&gt;
        );
      } else {
        return (
          &lt;Navigate to='/panel/articleverification'  /&gt;
        )
      }
      
    }
  }
  
  // Wrap and export
  export default function(props) {
    const navigation = useNavigate();
  
    return &lt;HomePageForArticalVerificationPanel {...props} navigation={navigation} /&gt;;
  }
  
  </code></pre>
  <p>and below is my routing code</p>
  <pre><code>import React from &quot;react&quot;;
  
  import {Routes,Route} from 'react-router-dom'
  import EditorPage from './components/editor/classbased/editorPage'
  import LoginPageForArticalVerificationPanel from './components/panel/articleverficationpanel/classbased/loginPage'
  import HomePageForArticalVerificationPanel from './components/panel/articleverficationpanel/classbased/homePage'
  import ArticlePageForArticalVerificationPanel from './components/panel/articleverficationpanel/classbased/articlePage'
  class App extends React.Component {
    state = {
      authorised:false,
      extras:{}
    }
  
    authorizeUser = (authorizeState,extras) =&gt; {
      console.log('called 1')
      this.setState({
        authorised:authorizeState,
        extras:extras
      })
    }
    render() {
      return (
        &lt;&gt;
          &lt;Routes&gt;
              &lt;Route path='/editor' element={&lt;EditorPage /&gt;} /&gt;
              &lt;Route path='/panel/articleverification' element={&lt;LoginPageForArticalVerificationPanel authorizeUser={this.authorizeUser}/&gt;} /&gt;
              &lt;Route path='/panel/articleverification/homepage' element={&lt;HomePageForArticalVerificationPanel authorized={this.state.authorised}/&gt;} /&gt;
              &lt;Route path='/panel/articleverification/articlepage' element={&lt;ArticlePageForArticalVerificationPanel authorized={this.state.authorised}/&gt;} /&gt;
  
          &lt;/Routes&gt;
        &lt;/&gt;
      );
    }
  }
  export default App;
  
  </code></pre>