Steps to Create a React App and Installing Module
Step 1: Create a React application by using the following command in the terminal.
npx create-react-app foldername
Step 2: Now, go to the project folder i.e. nesting-demo by running the following command.
cd foldername
Step 3: Let’s install the React Router DOM npm package required for this project
npm i react-router-dom
Project Structure:
The dependencies list in package.json file:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
What is ScrollRestoration in React Router
In React Router, scrollRestoration is a feature that helps maintain the scroll position of a webpage when navigating between different routes within a single-page application. When enabled, it ensures that when a user goes back or forward in their browsing history, the page remembers where they were scrolled to previously, rather than resetting to the top of the page.
This feature enhances the user experience by providing seamless navigation within the application without disrupting their reading or browsing flow. By default, the React Router does not handle scroll restoration. In this article, we’ll learn about ScrollRestoration in detail.
Table of Content
- ScrollRestoration when user navigates to a different page
- When user reloads the page
- getKey Prop
- Preventing Scroll Reset
Contact Us