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

Modern web apps need multiple pages like Home, About, and Contact. You want these pages to load without refreshing the browser. React Router solves this problem.

It lets you build Single Page Applications (SPA). This makes your app feel fast and smooth.

Benefits of React Router:

How to set it up:

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

  2. Wrap your app in 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

The Link component stops the browser from a full reload. This is better than using standard anchor tags.

Pro tip: Do not add your Navbar to every page. Place it once inside App.jsx. This prevents duplicate code and makes maintenance easy.

You can use this for portfolio sites to organize sections like:

React Router is a tool you need for professional projects like dashboards or e-commerce sites. It simplifies your workflow and improves performance.

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