React Router v6: Everything You Need to Know

When building modern React applications, navigation is essential. That’s where routing comes in — it allows you to move between pages or views seamlessly. The most popular solution for this is React Router, and with version 6, it introduces a cleaner API, improved performance, and a host of new features.

In this blog, we’ll break down everything you need to know about React Router v6: its improvements, how to get started, and practical examples.

---

What is React Router?

React Router is a client-side routing library for React. It maps URLs to components, so users can navigate your app without triggering a full page reload. This makes React apps feel smooth, fast, and app-like.

---

What’s New in React Router v6?

React Router v6 brings several significant changes compared to v5:

• Simpler Route Definitions – Routes go directly inside <Routes> instead of <Switch>.
   
• Automatic Route Ranking – No more manual ordering; v6 automatically selects the best match.
   
• Element Prop – The element prop replaces component and render.
   
• Nested Routes – A more intuitive and powerful way to handle route nesting.
   
• Hooks API – New hooks like useNavigate, useParams, and useLocation streamline navigation and route handling.

 

---

Basic Setup

Install React Router with:

Wrap your app with BrowserRouter in index.js:

 

---

Defining Routes

In v6, we now use <Routes> instead of <Switch>:

 

---

Nested Routes

Nested routing is much simpler and more powerful:

 

Inside Dashboard, use the <Outlet /> component to render nested routes:
 

 

---

Navigation with useNavigate

In v6, useNavigate replaces useHistory:

 

---

Accessing Route Parameters

Dynamic routes are straightforward using useParams:

 

---

Handling 404 Pages

React Router v6 allows easy 404 handling with a wildcard route:

 

---

Key Benefits of React Router v6

• Cleaner, more concise code.
   
• Smarter route matching.
   
• Strong nested routing capabilities.
   
• Modern, hooks-driven API.
  
   

---

Final Thoughts

React Router v6 is a big step forward in managing routing for React apps. With its simplified syntax, enhanced nesting, and hooks-based approach, it makes building scalable navigation systems easier than ever.

If you’re still on v5, upgrading to v6 is highly recommended to take advantage of its performance improvements and developer-friendly features.