๐—จ๐—ป๐—ฑ๐—ฒ๐—ฟ๐˜€๐˜๐—ฎ๐—ป๐—ฑ๐—ถ๐—ป๐—ด ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—ฅ๐—ผ๐˜‚๐˜๐—ฒ๐—ฟ

Modern web apps need multiple pages. You need Home, About, and Contact pages. React Router lets you move between these pages without reloading the browser.

This library turns your React app into a Single Page Application (SPA). It makes your app feel fast and smooth.

Benefits of React Router:

How to start:

  1. Install the library via npm: npm install react-router-dom

  2. Wrap your app with BrowserRouter in your main entry file: import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render( );

  1. Define your routes in App.jsx: import { Routes, Route } from "react-router-dom";

function App() { return ( <Route path="/" element={} /> <Route path="/about" element={} /> ); }

  1. Use the Link component to move between pages:
Home About

Standard HTML anchor tags reload the whole page. The Link component stops this. This keeps your app fast.

Pro tip: Do not add your Navbar to every single page. This creates duplicate code. Put your Navbar once inside App.jsx. This makes your code easier to maintain and keeps your structure clean.

React Router is essential for building:

It helps you build professional projects with a smooth user experience.

Source: https://dev.to/aj_arul/understanding-react-router-building-multi-page-applications-in-react-14in