{"id":16392,"date":"2023-01-19T11:09:31","date_gmt":"2023-01-19T05:39:31","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=16392"},"modified":"2023-12-13T17:50:31","modified_gmt":"2023-12-13T12:20:31","slug":"how-to-setup-react-router-v6","status":"publish","type":"post","link":"https:\/\/guviv3.codingpuppet.com\/blog\/how-to-setup-react-router-v6\/","title":{"rendered":"How to Setup React Router v6? | Tutorial 2024"},"content":{"rendered":"\n

Are you looking to learn how to set up React Router v6 and start routing your React applications?<\/strong> This guide will show you step-by-step how to setup React Router v6 and start building dynamic, single-page applications. <\/em><\/strong>With React Router v6, you can create powerful and dynamic routing solutions with ease.<\/p>\n\n\n\n

React Router<\/strong> v6.4.0 is a library for routing in React applications and provides a routing solution that allows developers to declaratively map routes to components and manage the URL and navigation state of the application. It also provides features like route preloading, lazy loading, and query parameters.<\/strong><\/p>\n\n\n\n

Routing allows the user to navigate through different pages of your app without refreshing the whole page. <\/strong>With the help of routing, you can create a single-page application (SPA) that allows users to navigate through different pages of your web app without refreshing the whole page and improve the overall user experience by making your application faster, more responsive, and more dynamic.<\/p>\n\n\n\n

Step-by-Step Guide to Setup React Router<\/strong><\/h1>\n\n\n\n

Follow the setup instructions carefully to add an easy navigation feature to your React app with different pages.<\/em><\/p>\n\n\n\n

Getting Started with React Router:<\/strong><\/p>\n\n\n\n

Step 1: Installing React Router<\/strong><\/h2>\n\n\n\n

To install React Router<\/a>,<\/strong> you’ll need Node.js installed for the npm command line tool, after which you have to run the following command:<\/em><\/p>\n\n\n\n

npm install react-router-dom<\/code><\/pre>\n\n\n\n
and wait for the installation to complete. <\/p>\n\n\n\n
What is npm?<\/h4>\n\n\n\n
npm stands for Node Package Manager, which is a library and registry for JavaScript software packages. It is free and used by more than 11 million developers worldwide.Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well<\/strong>. It also has command-line tools to help you install the different packages and manage their dependencies. <\/p>\n\n\n\n
If you are using Yarn<\/strong> then run the following command: <\/p>\n\n\n\n
yarn add react-router-dom<\/code><\/pre>\n\n\n\n
Step 2: Adding React Router<\/strong><\/h2>\n\n\n\n
The first thing to do after installing react-router-dom is to make React Router available anywhere in your app. For this, we use a <BrowserRouter> that stores the current location in the browser’s address bar using clean URLs and navigates using the browser’s built-in history stack.<\/p>\n\n\n\n
To do this, open the index.js file in the src folder and replace the <React.StrictMode><\/em><\/strong> with <BrowserRouter> <\/em><\/strong>by importing it from react-router-dom and then wrapping the root component in it.<\/p>\n\n\n\n
index.js file before changes:<\/strong><\/p>\n\n\n\n
\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport App from '.\/App';\nimport reportWebVitals from '.\/reportWebVitals';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  <React.StrictMode>\n    <App \/>\n  <\/React.StrictMode>\n);\n\nreportWebVitals();\n<\/code><\/pre>\n\n\n\n
index.js file after changes:<\/strong><\/p>\n\n\n\n
\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport App from '.\/App';\nimport reportWebVitals from '.\/reportWebVitals';\nimport { BrowserRouter } from 'react-router-dom';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  <BrowserRouter>\n    <App \/>\n  <\/BrowserRouter>\n);\n\nreportWebVitals();\n<\/code><\/pre>\n\n\n\n
So, now you can access all the features of react-router-dom<\/strong> like routers, routes, etc.<\/p>\n\n\n\n
Step 3: Routing and Rendering Components<\/strong><\/h2>\n\n\n\n
1. Creating Multiple Components<\/strong><\/h3>\n\n\n\n
To render different components for routing, we\u2019ll create some components in our project. In your project src folder, create a new folder as Pages. In that, create some components such as Home.js<\/strong>, Courses.js<\/strong>, Live.js<\/strong>, and Contact.js<\/strong>.<\/p>\n\n\n\n
See the code for all the components below:<\/p>\n\n\n\n
Home.js<\/strong><\/h4>\n\n\n\n
import React from 'react'\n\nfunction Home() {\n  return (\n    <div>Home<\/div>\n  )\n}\n\nexport default Home\n<\/code><\/pre>\n\n\n\n
Contact.js<\/strong><\/h4>\n\n\n\n
import React from 'react'\n\nfunction Contact() {\n  return (\n    <div>Contact<\/div>\n  )\n}\n\nexport default Contact\n<\/code><\/pre>\n\n\n\n
Courses.js<\/strong><\/h4>\n\n\n\n
import React from 'react'\n\nfunction Courses() {\n  return (\n    <div>Courses<\/div>\n  )\n}\n\nexport default Courses\n<\/code><\/pre>\n\n\n\n
Live.js<\/strong><\/h4>\n\n\n\n
import React from 'react'\n\nfunction Live() {\n  return (\n    <div>Live<\/div>\n  )\n}\n\nexport default Live\n<\/code><\/pre>\n\n\n\n
After creating all the component files, the project directory should look like this:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
2. Define routes<\/strong><\/h3>\n\n\n\n
Our root component is the App.js component, where our React code gets rendered initially. We will be creating all our routes in it. <\/p>\n\n\n\n
To define the routes, we are going to use two things: Routes <\/strong>and Route<\/strong>. Import both components from react-router-dom and use them to route the components. The syntax for defining the routes is as follows:<\/p>\n\n\n\n
<Routes>\n   <Route path=\"\/\" element={<Home \/>} \/>\n   <Route path=\"\/course\" element={<Courses \/>} \/>\n   <Route path=\"\/live\" element={<Live \/>} \/>\n   <Route path=\"\/contact\" element={<Contact \/>} \/>\n<\/Routes><\/code><\/pre>\n\n\n\n
Let\u2019s understand this syntax in detail:<\/p>\n\n\n\n