Routing is the process of navigating between different pages or views in a React application.
In traditional websites:
Home Page
↓
New Request
↓
Server Returns New HTML Page
In React:
Home
↓
About
↓
Contact
without refreshing the page.
This is called:
Client-Side Routing
Routing determines:
Examples:
/ → Home Page
/about → About Page
/contact → Contact Page
/products → Products Page
Without Routing:
Everything Inside One Component
Problems:
With Routing:
Each Page
↓
Separate Component
Browser
↓
Request
↓
Server
↓
New HTML Page
The browser refreshes the page every time.
Browser
↓
React Router
↓
Component Changes
No page refresh occurs, providing a faster user experience.
Common routing libraries include:
React Router is the most widely used routing library for React applications.
npm install react-router-dom
src/
├── pages/
│ ├── Home.jsx
│ ├── About.jsx
│ └── Contact.jsx
├── App.jsx
└── main.jsx
function Home() {
return (
<h1>
Home Page
</h1>
);
}
export default Home;
function About() {
return (
<h1>
About Page
</h1>
);
}
export default About;
main.jsx
import ReactDOM
from "react-dom/client";
import {
BrowserRouter
}
from "react-router-dom";
import App
from "./App";
ReactDOM.createRoot(
document.getElementById(
"root"
)
).render(
<BrowserRouter>
<App />
</BrowserRouter>
);
App.jsx
import {
Routes,
Route
}
from "react-router-dom";
import Home
from "./pages/Home";
import About
from "./pages/About";
function App() {
return (
<Routes>
<Route
path="/"
element={<Home />}
/>
<Route
path="/about"
element={<About />}
/>
</Routes>
);
}
URL
↓
Route Match
↓
Component Render
Example:
/about
↓
About Component
React Router provides the <Link /> component instead of the HTML <a> tag.
Example:
import {
Link
}
from "react-router-dom";
<Link to="/">
Home
</Link>
<Link to="/about">
About
</Link>
<a>?<a href="/about">
Using <a> refreshes the page.
Using React Router:
<nav>
<Link to="/">
Home
</Link>
<Link to="/about">
About
</Link>
</nav>
Nested routes are useful when pages contain sub-pages.
Examples:
/dashboard
/dashboard/profile
/dashboard/settings
Example:
<Route
path="/dashboard"
element={<Dashboard />}
>
<Route
path="profile"
element={<Profile />}
/>
<Route
path="settings"
element={<Settings />}
/>
</Route>
Outlet renders child routes inside the parent component.
import {
Outlet
}
from "react-router-dom";
function Dashboard() {
return (
<div>
<h1>
Dashboard
</h1>
<Outlet />
</div>
);
}
Useful for pages like:
Example URLs:
/products/1
/products/2
/products/3
Route:
<Route
path="/products/:id"
element={<Product />}
/>
import {
useParams
}
from "react-router-dom";
const {
id
} = useParams();
URL:
/products/10
Output:
id = "10"
Navigate using JavaScript.
import {
useNavigate
}
from "react-router-dom";
const navigate =
useNavigate();
Example:
navigate("/dashboard");
Restrict access to authenticated users.
function ProtectedRoute({
children
}) {
const loggedIn = true;
if (!loggedIn) {
return (
<Navigate
to="/login"
/>
);
}
return children;
}
Usage:
<Route
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
Reusable layouts make it easy to share UI across multiple pages.
Example layout:
Navbar
↓
Page Content
↓
Footer
function Layout() {
return (
<>
<Navbar />
<Outlet />
<Footer />
</>
);
}
| Hook | Purpose |
|---|---|
| useNavigate | Navigate programmatically |
| useParams | Access URL parameters |
| useLocation | Current URL information |
| useSearchParams | Query parameters |
Returns information about the current URL.
const location =
useLocation();
console.log(
location.pathname
);
Output:
/about
Reads query string parameters.
URL:
/products?page=1
const [
searchParams
] = useSearchParams();
searchParams.get("page");
Output:
1
BrowserRouter
↓
Routes
↓
Route
↓
Component
TanStack Router is a newer, type-safe routing solution for React.
It provides:
npm install @tanstack/react-router
import {
createRouter
}
from "@tanstack/react-router";
Example:
const router =
createRouter({
routeTree
});
const homeRoute =
createRoute({
path: "/",
component: Home
});
<RouterProvider
router={router}
/>
Similar to React Router.
<Link to="/about">
About
</Link>
/products/$id
Example:
/products/10
Parameter:
id = 10
A major advantage of TanStack Router.
Load data before rendering the page.
loader: async () => {
return fetchUsers();
}
Flow:
Route
↓
Loader
↓
Data Fetch
↓
Render Component
React Router:
Manual Validation
TanStack Router:
Built-in Validation
Example:
validateSearch: search => ({
page:
Number(search.page)
})
| Feature | React Router | TanStack Router |
|---|---|---|
| Popularity | Very High | Growing |
| Learning Curve | Easy | Moderate |
| Type Safety | Basic | Excellent |
| Data Loading | Good | Excellent |
| TypeScript Support | Good | Excellent |
| Ecosystem | Large | Growing |
| Production Usage | Very Common | Increasing |
Choose React Router when building:
Choose TanStack Router for:
Dashboard application structure:
/
├── Login
├── Dashboard
├── Users
├── Settings
└── Reports
Routing structure:
BrowserRouter
↓
Dashboard Layout
↓
Nested Routes
↓
Individual Pages
pages/
├── Home.jsx
├── About.jsx
├── Contact.jsx
└── Dashboard.jsx
Good examples:
/dashboard/profile
/dashboard/settings
/users/:id
/products/:id
/posts/:slug
Examples include:
Learning path:
React Router
↓
TanStack Router
React Router concepts transfer easily to TanStack Router.
| Concept | Purpose |
|---|---|
| Routing | Navigation between pages |
| BrowserRouter | Router provider |
| Routes | Route container |
| Route | Individual route |
| Link | Navigation |
| Outlet | Nested routes |
| useNavigate | Programmatic navigation |
| useParams | URL parameters |
| React Router | Popular routing library |
| TanStack Router | Modern type-safe router |
Routing enables Single Page Applications (SPAs).
URL
↓
Router
↓
Route Match
↓
Component Render
Modern React applications commonly use:
React Router
↓
Pages
↓
Nested Routes
↓
Dynamic Routes
↓
Protected Routes
Larger TypeScript-heavy applications increasingly adopt:
TanStack Router
↓
Type Safety
↓
Advanced Routing
↓
Data Loaders
to build more robust and scalable routing systems.