React Router

React Router:
React Router is a library for handling routing and navigation in React JS Applications. It allows you to create dynamic routes.It enables navigation in a single-page application (SPA) without refreshing the entire page.

Why use React Rou…


This content originally appeared on DEV Community and was authored by Chithra Priya

React Router:
React Router is a library for handling routing and navigation in React JS Applications. It allows you to create dynamic routes.It enables navigation in a single-page application (SPA) without refreshing the entire page.

Why use React Router?

  • Enables navigation between views/pages
  • Keeps UI in sync with the URL
  • Avoids full page reloads (SPA behavior)
  • Offers route parameters, nested routes, redirects, etc.

Installation:

npm install react-router-dom

Example Program:

jsx file:

import { Link } from 'react-router-dom';

function NavBar() {
  return (
    <nav>
      <Link to="/">Home</Link> | 
      <Link to="/about">About</Link>
    </nav>
  );
}

App.jsx (or) App.js:

// App.jsx or App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;
  • BrowserRouter - Wraps the app to enable routing
  • Routes - Grouping all Route elements
  • Route - It has two arguments (Path, Element)


This content originally appeared on DEV Community and was authored by Chithra Priya


Print Share Comment Cite Upload Translate Updates
APA

Chithra Priya | Sciencx (2025-06-27T09:38:23+00:00) React Router. Retrieved from https://www.scien.cx/2025/06/27/react-router/

MLA
" » React Router." Chithra Priya | Sciencx - Friday June 27, 2025, https://www.scien.cx/2025/06/27/react-router/
HARVARD
Chithra Priya | Sciencx Friday June 27, 2025 » React Router., viewed ,<https://www.scien.cx/2025/06/27/react-router/>
VANCOUVER
Chithra Priya | Sciencx - » React Router. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/06/27/react-router/
CHICAGO
" » React Router." Chithra Priya | Sciencx - Accessed . https://www.scien.cx/2025/06/27/react-router/
IEEE
" » React Router." Chithra Priya | Sciencx [Online]. Available: https://www.scien.cx/2025/06/27/react-router/. [Accessed: ]
rf:citation
» React Router | Chithra Priya | Sciencx | https://www.scien.cx/2025/06/27/react-router/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts