If you are learning React.js at some point you will hear about something called React Router. When I first started learning React during my college project. I was honestly confused. My question was simple: How do websites move from one page to another without refreshing the whole page?
In normal HTML websites we use different pages like index.html, about.html, contact.html. But React is a Single Page Application (SPA). That means most of the time we only have one HTML page and React dynamically changes what we see on the screen.
This is where React Router comes into the picture.
In this blog I will explain React Router Basics for Beginners in very simple language just like how we discuss coding topics with friends in college or during lab practice.
What is React Router
In simple words, React Router is a library that helps us create navigation between different components in a React application.
Basically it allows users to move between different pages without reloading the entire website.
For example, think about a college portal website. It might have pages like:
- Dashboard
- Attendance
- Assignments
- Profile
When a student clicks Assignments the page changes but the website does not reload completely. React Router manages this navigation.
Why React Router is needed
Many beginners ask this question. I also had the same doubt when learning React.
Without React Router:
- Every page would require a reload.
- The user experience becomes slow.
- It will not feel like a modern web application.
With React Router:
- Navigation is fast
- No page reload
- Better user experience
In most React projects today React Router is almost a standard tool.
Installing React Router
Before using it we need to install it in our project.
Open terminal inside your React project and run:
npm install react-router-dom
Here react-router-dom is the package used for web applications.
After installation we can start using it in our project.
Routes and Links
This is the core concept of React Router. Many students get confused here initially but it is actually simple.
What is a Route?
A Route defines which component should be displayed for a specific URL.
For example:
| URL | Component |
|---|---|
| / | Home |
| /about | About |
| /contact | Contact |
So when the user visits /about, React Router shows the About component.
Basic Example
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;
What is happening here?
Let us break it down.
- BrowserRouter → enables routing
- Routes → container for all routes
- Route → defines path and component
So when user opens:
localhost:3000/about
The About component will be displayed.
When I first tried this in my practice project, it actually felt cool. It was like building a mini website inside React.
What is a Link?
In normal HTML we use:
<a href="/about">About</a>
But in React Router we use Link.
Example:
import { Link } from "react-router-dom";
function Navbar() {
return (
<div>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</div>
);
}
Why Link instead of anchor tag?
- Because Link prevents full page reload.
- So navigation becomes fast and smooth.
This is something many beginners miss during early practice.
Nested Routes
Nested Routes are slightly advanced but still easy if you understand the concept.
Basically, Nested Routes means routes inside routes.
This is useful when building dashboard type applications.
For example think about a student dashboard.
Dashboard
├── Profile
├── Assignments
├── Results
All these pages are inside the Dashboard page.
So instead of creating separate main routes we create nested routes.
Nested Routes Example
import { Routes, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import Profile from "./Profile";
import Assignments from "./Assignments";
function App() {
return (
<Routes>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="assignments" element={<Assignments />} />
</Route>
</Routes>
);
}
Now URLs will look like this:
- /dashboard/profile
- /dashboard/assignments
Inside the Dashboard component we use something called Outlet.
Example:
import { Outlet } from "react-router-dom";
function Dashboard() {
return (
<div>
<h2>Student Dashboard</h2>
<Outlet />
</div>
);
}
What does Outlet do?
It tells React Router:
"Render the nested component here."
So if the URL is /dashboard/profilethe Profile component appears inside Dashboard.
When I used nested routes in my Employee Management System project it helped organize pages like:
- Employee List
- Add Employee
- Update Employee
It makes the project structure cleaner.
Practical Examples
Let us discuss some practical situations where React Router is useful.
These are very common in real projects and even college assignments.
Navigation Bar
Most websites have a navigation bar.
- Home
- Courses
- Notes
- Contact
Using React Router:
<Link to="/">Home</Link>
<Link to="/courses">Courses</Link>
<Link to="/notes">Notes</Link>
When a student clicks NotesReact Router loads the Notes component.
Login and Dashboard
Many applications have login systems.
Example flow:
Login → Dashboard → Profile
React Router helps manage these pages easily.
Example routes:
- /login
- /dashboard
- /dashboard/profile
College Project Example
Suppose we build a Library Management System.
| Page | Route |
|---|---|
| Home | / |
| Books | /books |
| Issue Book | /issue |
| Return Book | /return |
React Router handles all these pages inside a single React app.
During my React practice building small routing projects helped me understand the concept faster.
Common Mistakes Beginners Make
Many students struggle with React Router in the beginning. I also made these mistakes.
Some common ones are:
Forgetting BrowserRouter
Without BrowserRouter routing will not work.
Using <a> tag instead of <Link>
Anchor tags reload the page.
Always use Link.
Wrong path names
Sometimes beginners write:
/about
/About
These are considered different paths.
Forgetting Outlet in nested routes
If Outlet is missing, nested components will not appear.
Comparison: Normal Navigation vs React Router
| Feature | Normal HTML Navigation | React Router |
|---|---|---|
| Page Reload | Yes | No |
| Speed | Slower | Faster |
| User Experience | Basic | Modern |
| Application Type | Multi Page | Single Page Application |
So for modern web apps, React Router is the better approach.
FAQs
What is React Router in simple words?
React Router is a library that allows navigation between different components in a React application without refreshing the page.
Why do we use react-router-dom?
react-router-dom is the web version of React Router used for building routing in browser-based React applications.
What is the difference between Route and Link?
Route defines which component should appear for a specific path.
Link is used to navigate between routes.
What are nested routes?
Nested routes are routes inside other routes. They are commonly used in dashboards and complex applications.
Is React Router necessary for React projects?
Not always but most modern React applications use React Router to handle navigation efficiently.
Conclusion
React Router is one of the most important tools when building React applications. Without routing a React app would feel very limited.
When I first learned React in college, routing was slightly confusing. But after practicing small projects like navigation menus, dashboards and login pages the concept became much clearer.
To summarize:
- React Router manages navigation in React apps
- Route defines which component to display
- Link helps users navigate
- Nested Routes organize complex pages
If you are a beginner my suggestion is simple:
Start with a small project like a multi page student portal or notes website. Try adding Home, About and Contact pages using React Router.
Once you practice a few times routing will start feeling very natural.
And honestly after learning React Router your React projects will start looking more professional and real world ready.
Happy coding 🚀
Read Also : React Hooks Basics Explained for Beginners: useState, useEffect, and Custom Hooks with Practical Examples
