Mastering React Router DOM: Tips and Tricks for Smooth Navigation

Mastering React Router DOM: Tips and Tricks for Smooth Navigation

Table of contents

No heading

No headings in the article.

React Router

Today I learn about React router dom here is some point to get started with it

About React Router

  • Use for page routing

  • Most popular javascript library

  • Easy to handle route in react.js

Let’s start with the installation

  • First, you need to start with react project setup

    • use npm create-react-app app-name
  • The second install react-router

- npm i -D react-router-dom

Lots of developers prefer to use this in index.js but I prefer App.js

Let’s start using in practical

  • First of all import it from react-router-dom

    • import { BrowserRouter, Routes, Route } from "react-router-dom";

There are basically three tag

  • <BrowserRouter></BrowserRouter>

-Wrap all content

- <Routes></Routes>

There are multiple routes for a single project

  • <Route path="contact" element={<Contact />} />

    • The third one is the route. There is also a multiple routes.

    • path = after the main domain ex: contact

    • element = on contact path is render contact component