Question 72878 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Does the state will lose when refresh page in react-router v6? – Reactjs

The answers on Internet is Yes, but when I try to refresh on the page, the state params still exist.

so the question is: will the params passed by state in react-router lose when refresh page, or the react-router v6 improve the method of achieving state so that it won’t lose

here is the sample code:

const navigate = useNavigate();

navigate('/path/to/newpage', {
   state: {
             name: 'lucy',
             age: 20
          }
});

When I refresh the page, the params won’t lose.

Tags:

3

Answers


  1. 0

    React-router v6 uses the HTML5 history API, which allows you to manipulate the browser’s history, without triggering a full page reload. This means that when you navigate between pages in your React app, the browser’s URL changes, but the React state and component tree are preserved.

    When you refresh the page in a react-router v6 app, the browser will request the new URL from the server, and the server will respond with the appropriate HTML, JavaScript, and CSS resources needed to render the page. Once the browser has loaded these resources and re-rendered the page, your React components will be re-initialized with their initial state and props, just as they were when the app was first loaded.

    However, if your app relies on data that is stored locally in the browser, such as in the browser’s local storage or session storage, that data may be lost when you refresh the page, depending on how you have implemented your app. In general, it’s a good practice to store any persistent data on the server, and use client-side storage only for temporary data or caching purposes.

    Login or Signup to reply.
  2. 0

    No, the state will not be lost when refreshing the page in React Router v6.

    React Router v6 uses the new History API to manage the browser history, which allows it to maintain the state even when the page is refreshed. This means that the components and their states will be preserved when the user refreshes the page, as long as the URL remains the same.

    However, if the user refreshes the page and changes the URL, then the component and its state will be reset, as the new URL will trigger a new component to render.

    It is also worth noting that the behavior may differ depending on how your app is hosted and deployed. If your app is served statically, then refreshing the page may cause the server to return a new HTML document, which could potentially cause the state to be lost. To avoid this, you may need to configure your server to always serve the same HTML document regardless of the URL

    Login or Signup to reply.
  3. 0

    No, the state will not be lost when refreshing the page in React Router v6. This is because React Router v6 uses a browser-based history API that stores the state of the application in the browser’s history. This means that when the page is refreshed, the state of the application is still available and does not need to be reloaded.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search