What is Router in React ?

1. Intro to React Router

React Router is the standard routing library for React. It allows your app to behave like a multi-page app by enabling navigation between different components without reloading the page.

Benefits:

Fast navigation (SPA behavior)
Route-based code splitting
Dynamic URLs (/user/:id)
Nested routes

2. Installing React Router (Third-Party Package)

npm install react-router-dom

Then, in your App.js, wrap your app in BrowserRouter:

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

function App() {
return (
<BrowserRouter>
{/* Your Routes */}
</BrowserRouter>
);
}

3. Working with Router

Basic Setup

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import AddUser from './pages/AddUser';

function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link> |
<Link to="/about">About</Link> |
<Link to="/add-user">Add User</Link>
</nav>

<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/add-user" element={<AddUser />} />
</Routes>
</BrowserRouter>
);
}

4. Sending Data to Another Page

Using useNavigate + state (preferred)

// Page1.jsx
import { useNavigate } from 'react-router-dom';

const Page1 = () => {
const navigate = useNavigate();
const user = { name: "Jigar", age: 25 };

const goToDetails = () => {
navigate('/details', { state: user });
};

return <button onClick={goToDetails}>Go to Details</button>;
};

// Details.jsx
import { useLocation } from 'react-router-dom';

const Details = () => {
const location = useLocation();
const { name, age } = location.state || {};

return (
<div>
<h3>Name: {name}</h3>
<p>Age: {age}</p>
</div>
);
};

5. CRUD Operation with Routing

We’ll simulate a basic user list with Add/Edit/Delete and use routing for each action.

Pages

UserList.jsx – Read all users
AddUser.jsx – Create new user
EditUser.jsx – Update user
Delete directly from list

App Routes

UserList.jsx

import { Link, useNavigate } from 'react-router-dom';
import { useState } from 'react';

const UserList = () => {
const navigate = useNavigate();
const [users, setUsers] = useState([
{ id: 1, name: "John" },
{ id: 2, name: "Jane" },
]);

const deleteUser = (id) => {
setUsers(users.filter(user => user.id !== id));
};

return (
<div>
<h2>Users</h2>
<Link to="/add-user">Add New</Link>
<ul>
{users.map(user => (
<li key={user.id}>
{user.name} {" "}
<button onClick={() => navigate(`/edit-user/${user.id}`)}>Edit</button>
<button onClick={() => deleteUser(user.id)}>Delete</button>
</li>
))}
</ul>
</div>
);
};

AddUser.jsx

import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

const AddUser = () => {
const navigate = useNavigate();
const [name, setName] = useState("");

const handleSubmit = (e) => {
e.preventDefault();
// Normally: send data to backend
console.log("User Added:", name);
navigate('/');
};

return (
<form onSubmit={handleSubmit}>
<input value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter name" />
<button type="submit">Add</button>
</form>
);
};

EditUser.jsx

import { useParams, useNavigate } from 'react-router-dom';
import { useState } from 'react';

const EditUser = () => {
const { id } = useParams();
const navigate = useNavigate();
const [name, setName] = useState("");

const handleUpdate = (e) => {
e.preventDefault();
// Normally: update user by ID
console.log("User Updated:", id, name);
navigate('/');
};

return (
<form onSubmit={handleUpdate}>
<h3>Editing User ID: {id}</h3>
<input value={name} onChange={(e) => setName(e.target.value)} placeholder="Update name" />
<button type="submit">Update</button>
</form>
);
};

Summary

Feature	Technique
Routing setup	`BrowserRouter`, `Routes`, `Route`
Navigation	`Link`, `useNavigate()`
Passing data to page	`useNavigate(..., { state })`
Reading URL params	`useParams()`
CRUD operation with routing	Split into multiple pages via routes