React

Complete Guide to React Router v6 (6.4+): A Step-by-Step Tutorial

September 8, 2025

•

Alex Kugell

What is React Router and Why Use It?

React Router is a popular library in the React ecosystem that enables the dynamic routing of components based on URL changes in your React app.

Unlike traditional multi-page websites, React Router uses client-side routing, allowing the application to update the view without reloading the entire page. This creates a more fluid experience in your UI.

Two browser windows linked by a circular arrow, symbolizing seamless navigation without reloads in React. — Seamless Navigation Without Reloads

Key Features of React Router v6

Many features of React Router v6 make it an advantageous and predictable routing system. These powerful features also make it an excellent option for very complex applications that many other routing systems may not be suitable for.

Here are some of the most notable features our developers have been able to use from v6, particularly:

Simplified route declarations with the new <Routes> and <Route> API.
Improved support for nested routes utilizing the Outlet component.
Powerful navigation hooks like useNavigate, useLocation, and useParams.
Built-in support for route-based code splitting and lazy loading
New data APIs, such as loaders and error boundaries (in v6.4+), for better control over fetching and error handling
Support for relative routing and the useRoutes hook.

Benefits of Using React Router in Your React Application

Using this routing library in your React app development provides developers with a wide range of benefits.

It enables easy navigation within your application, makes deep linking possible (allowing users to bookmark specific parts of your app), and enhances the overall user experience.

Incorporating CSS alongside React Router ensures that your routes not only function seamlessly but also maintain a consistent style, improving the visual coherence of your application.

Styling your navigation elements and ensuring smooth transitions between routes can have a significant impact on user retention.

We have found that this can lead to a massive increase in turnover in fields like fintech app development, where a better user experience often leads to a better reputation and being perceived as more trustworthy.

React Router v6 also improves on its predecessors by offering a simplified API, new route matching improvements, and improved handling of nested routes – elements that have become essential in modern React projects.

Comparison of React Router v5 and v6

To make it easier to understand the differences between React Router v5 and v6, here is a table that looks at some of the primary affected features.

Feature	React Router v5	React Router v6
Route grouping	*Switch*	*Routes*
Route definition	*component* or *render* props.	*element*
Nested routing	Manual, inconsistent.	Consistent and straightforward with the Outlet component.
Route matching	Prioritized, order-dependent.	Exact, declarative.
Programmatic navigation	*useHistory*	*useNavigate*
Data handling	No built-in data APIs.	Data APIs like loaders, actions, and error boundaries.
Relative routing	Not supported.	Supported.

How Does React Router Work with JavaScript?

React Router leverages JavaScript’s history API to manage navigation without refreshing the page.

The BrowserRouter component wraps the application, tracking URL changes and rendering the relevant components. This makes routing intuitive and efficient, allowing developers to handle multiple views in a single-page application, provided that your developers have wrapped the app from the start.

The simplest example is user history. When a user navigates to a new URL, the history API updates the path, and React Router will render the matching component, without needing to reload the entire page.

How to Set Up React Router v6 in Your Project?

Now that you know a little bit more about React Router v6, let’s take a look at how you would go about setting it up so that you can start taking advantage of the many benefits that it provides.

Installing React Router with npm

Installing React Router is simple. In the terminal, run the command ‘npm install react-router-dom.’

This command adds the react-router-dom package to your project, enabling routing features specific to the web.

If you are using Yarn instead, you can run ‘yarn add react-router-dom’ for the same effect.

Configuring BrowserRouter in Your App

Once installed, wrap your application with the BrowserRouter component to manage your routing:

import { BrowserRouter } from ‘react-router-dom’;

function App() {
return (
<BrowserRouter>
{/* Routes will go here */}
</BrowserRouter>
);
}

This configuration provides the necessary context for managing URL changes and updating views dynamically based on navigation events, eliminating the need for users to reload the pages. It should be the foundation of your routing setup if you are creating a React web app.

If you find that this step is causing a bunch of bugs, start your troubleshooting by making sure that BrowserRouter only wraps your apps once.

Defining Routes in React Router v6

With React Router v6, creating your first route is easier than ever. Let’s take a look at both basic routes and a concept known as nested routes.

Creating Basic Routes

First, ensure you have installed React Router v6 and configured BrowserRouter in your app, as mentioned above. Once you have done this, you can create basic routes by using the Routes and Route components to map paths to components:

import { Routes, Route } from ‘react-router-dom’;
import Home from ‘./Home’;

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

In this example, navigating to / will render the Home component.

If you are used to using previous versions, you will notice that React Router v6 replaces Switch with Routes. In the same vein, element is now used instead of component for JSX rendering.

So, in v5, you might have written something like this:

< Route path = “/” component = {Home} />

In v6, this will become:

< Route path = “/” element = { <Home/ >} />

This might take a bit of getting used to, so if you run into any issues, make sure that you double-check this. We do, however, think this is a significant change, as it makes the API a lot more consistent with modern React practices like hooks and functional components.

Creating Nested Routes in React Router v6

Here at Trio, we have seen that it is imperative to understand nested routes in React Router v6.

Nested routes allow you to build more complex applications where parent and child routes coexist. This is especially useful if you need to develop dashboards, where different sections, like a sidebar and main content, can be separately routed while maintaining a cohesive layout.

A tabbed interface in a browser window, showing dynamic child routes with gears representing settings. — Dynamic Child Routes

When building web applications using HTML and React, implementing nested routes becomes essential for maintaining structure and enhancing the user experience.

Implementing Child Routes in Your Application

To implement nested routes, use the Outlet component as a placeholder for child routes. This allows you to render child components within the parent component:

import { Outlet } from ‘react-router-dom’;

function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
<Outlet />
</div>
);
}

<Routes>
<Route path=”dashboard” element={<Dashboard />}>
<Route path=”settings” element={<Settings />} />
<Route path=”profile” element={<Profile />} />
</Route>
</Routes>

This may be confusing for beginner developers, but these nested routes are essential for sharing layout and state across related views.

Relative Routing

One of the most useful new features in React Router is relative routing. You can now define relative to parents instead of repeating full paths for child routes.

Looking at the above example, we see it here:

Some instances where our developers have encountered this include admin panels, wizards, and even apps with tabbed interfaces. This new format is a lot easier to maintain thanks to its simplicity.

We can assure you that, with transparent project management and effective client communication, our React developers will bring your vision to life without requiring your technical knowledge.

Managing Parameters in Nested Routes

With React Router v6, handling parameters is streamlined using the useParams hook. This allows you to access route parameters dynamically within your components:

import { useParams } from ‘react-router-dom’;

function Profile() {
const { userId } = useParams();
return <h3>User Profile for {userId}</h3>;
}

Now, if you utilize the example above, navigating to /dashboard/profile/123 would display User Profile for 123. This is just one of many use cases possible with Nested Routes.

Programmatic Navigation with useNavigate

React Router v6 introduces the Navigate component, which simplifies programmatic redirection. Here’s how you can use this React component to redirect users:

import { Navigate } from ‘react-router-dom’;

function Login() {
const isAuthenticated = false;

return isAuthenticated ? <Navigate to=”/dashboard” /> : <h2>Please log in</h2>;
}

The useNavigate hook provides another method to navigate programmatically. This is helpful when routing needs to occur after an action, like a form submission:

import { useNavigate } from ‘react-router-dom’;

function Home() {
const navigate = useNavigate();

const goToDashboard = () => {
navigate(‘/dashboard’);
};

return <button onClick={goToDashboard}>Go to Dashboard</button>;
}

React Router also supports event-based navigation using hooks like useLocation and useNavigate.

These hooks give you control over route changes, making navigation more interactive and dynamic.

As mentioned above, we have come to realize that this is highly critical, especially in lucrative fields, over the many years we have been outsourcing developers. You’ll use it for redirecting after a login, guiding users through a multi-step process, or a variety of other features critical to an effortless user experience.

Passing State with useNavigate

It is very rare that you will want navigation without additional information being sent along. One of the most common examples of these two being connected is a message after a successful login:

const navigate = useNavigate();

function LoginSuccess() {
const handleLogin = () => {
navigate(‘/dashboard’, { state: { message: ‘Welcome back!’ } });
};

return < button onClick = { handleLogin } > Login < / button > ;
}

You can access this state using the useLocation hook inside your target component:

import { useLocation } from ‘react-router-dom’;

function Dashboard() {
const location = useLocation();
return < h2 > {location.state?.message} < / h2 > ;
}

Replace Navigation

Developers should frequently use the replace option to prevent users from returning to the previous page. Here is an example:

navigate(‘ / login’, { replace: true });

This helps control access before and after logging out.

What are Protected Routes and How to Implement Them?

Protected routes ensure that only authorized users can access certain areas of your application.

This is especially important for applications that require login or authentication to protect sensitive information.

Illustration of two browser windows with a security shield in between, representing protected routes in React Router. — Control Access to Sensitive Pages

Setting Up Protected Routes in React Router v6

To implement protected routes, wrap your routes in a component that checks for authentication:

import { Navigate } from ‘react-router-dom’;

function PrivateRoute( { children }) {
const isAuthenticated = true; // Replace with actual authentication logic
return isAuthenticated ? children : < Navigate to = “/login” />;
}

Now, use this wrapper around the routes you want to protect:

<Routes>
<Route path=”/dashboard” element={<PrivateRoute><Dashboard /></PrivateRoute>} />
</Routes>

Role-Based Protected Routes

“Authenticated vs. not authenticated” is a good starting point for practice, but in reality, it rarely suffices. You’ll often need to specify more than that; for example, you might want to restrict certain sections of components to admins only.

Here is an example of what that might look like:

function RoleBasedRoute({ children, role }) {
const user = { isAuthenticated: true, role: ‘admin’ }; // Replace with real auth logic

if (! user.isAuthenticated) {
return < navigate to= “/login” />;
}

if (role & & user.role != = role) {
return ; < Navigate to = “/unauthorized” />;
}

return children;
}

And then in your routes, you would add:
<Route
path = “/admin”
element = {
<RoleBasedRoute role = “admin”>

}
/>

Using Protected Layouts with Outlet

If you have many protected child routes, all under the same parent, we recommend that you combine protection with nested layouts:

function ProtectedLayout() {
const isAuthenticated = true; // Replace with actual logic
return isAuthenticated ? < Outlet / > : < Navigate to = “/login” />;

}

< Routes >
<Route element = { < ProtectedLayout / > } >
<Route path = “/dashboard” element = { < Dashboard / >} / >

By doing things this way, you keep all of your authentication logic in one place without interfering with the rendering of the rest of your nested routes.

Handling Unauthorized Access in Your Application

If users attempt to access a protected route without the proper authentication, redirect them to a login page using the Navigate component.

This ensures unauthorized access is smoothly handled while maintaining security.

Secure mobile app development is one of the many specialties that we can help you with. Our developers are eager to prove their abilities and help you build trust in software partnerships.

Advanced Features in React Router v6.4+

Now that you’ve got a better idea of some of the basic features of React Router v6, let’s dive into some of the more advanced features that you might be able to take advantage of. Namely, we’ll look at two of the most powerful additions: route-based data loading and built-in error handling.

Data Loading with Loaders

Starting at React Router v6.4, data APIs like loader now let developers load data for routines before components even render!

This is similar to what you might find in frameworks like Remix, and is one of the primary reasons developers like to use those frameworks. The result has been a massive win for React, especially in the use cases of seasoned developers.

Here’s an example of what using the loader function might look like:

{
path: “/profile/:userId”,
element: ,
loader: async ({ params }) => {
return fetch(/api/users/${params.userId});
},
}

So how does this work? Loaders will help separate data fetching and UI logic. This means that your different components can receive data as props from the moment that they render. When using loaders like this, you will eliminate the need for useEffect in most cases.

This is invaluable in very complex apps where multiple routes will depend on different API calls, as it makes the code far easier to maintain while simultaneously increasing its overall performance.

Handling Form Submissions with Actions

React Router v6.4+ has also introduced actions, which help you handle data mutations in your route configuration.

{
path: “/contact/new”,
element: < NewContactForm />,
action: async ({ request }) => {
const formData = await request.formData();
return saveContact(formData);
},
}

This way, you can define the read (loader) and write (action) logic here at the route level, and keep your code organized, reducing your component boilerplate.

Working with Deferred Data

Some data, such as analytics or significant API responses, can take significantly longer to load than other types of data. Luckily, you can now work with deferred data and render the faster-loading parts of your UI immediately.

import { defer } from “react-router-dom”;

{
path: “/dashboard”,
element: ,
loader: () => defer({
user: fetchUser(),
analytics: fetchSlowAnalytics(),
}),
}

This is going to be a game-changer for user experience, ensuring that critical parts of the interface are available right away, decreasing metrics like bounce rates.

Error Handling with Error Boundaries

Error handling with error boundaries is another advanced feature we love. You can assign an errorElement to catch any issues that arise during route loading, rendering, or data fetching.

Here’s what your code snippet will look like:

<Route

path= “/profile/:userId”

element ={< Profile />}

errorElement= {< ErrorPage />}

Using these kinds of error boundaries makes it much easier to build applications that fail gracefully, providing you with meaningful feedback that helps you find and fix the issue. When you combine it with loaders, it is very easy to centralize your async logic and catch problems as early as possible.

Common Issues and Troubleshooting with React Router

There is always a chance that you will run into issues, especially if you are new to a library or tool, or if you are trying to integrate into a particularly large or complex app. Let’s take a look at what you might be doing wrong and what to do if you notice any issues.

Resolving 404 Errors in Your React Application

A common issue with routing is handling 404 errors when a user navigates to a route that doesn’t exist. In React Router v6, you can create a catch-all route to handle undefined paths:

<Route path=”*” element={<NotFound />} />

This will ensure that users see a custom 404 page instead of a blank screen.

You need to make sure that this wildcard route appears at the very end in your route configuration. This will allow it to act as a fallback for anything not matched above it.

A browser window displaying a 404 error message with a 'go back' button for navigation. — Handle Errors Gracefully

Debugging Routing Issues in React Router v6

Misconfiguring paths or missing components can lead to routing issues.

Ensure that each route is adequately defined and that components are imported correctly.

Using console logs and debugging tools like React Developer Tools can help track down routing bugs.

Some common bugs we have seen popping up relatively often include forgetting to wrap the app in <BrowserRouter>, leaving out <Outlet> in parent components, using the old component= prop instead of element=, and nesting multiple <BrowserRouter> components.

Best Practices for Handling URLs and Params

When working with URLs and parameters, ensure you define meaningful, SEO-friendly URLs.

Proper error handling, validation of parameters, and a logical URL structure can enhance the user experience and make navigation intuitive.

We also recommend avoiding hardcoding paths in multiple places whenever possible. Instead, use constants or route config files to make changes easier and safer.

React Router v6 simplifies navigation and offers powerful tools to create robust, dynamic applications.

At Trio, we have seen how using the right routing strategies can make or break a project’s success.

Whether you’re building a simple app or managing complex navigation, following best practices in React Router will elevate your application’s user experience.

It provides everything you ned, from defining basic routes and nested layouts to complex user interface implementation and error handling. If you are looking for a developer to help you make use of these best practices, you’re in the right place!

If you are interested in hiring a nearshore or offshore React developer with several years of experience under their belt and an extensive portfolio, look no further. Reach out to us to set up a call to discuss our future collaborative software development.

Share this article

Alex Kugell

With over 10 years of experience in software outsourcing, Alex has assisted in building high-performance teams before co-founding Trio with his partner Daniel. Today he enjoys helping people hire the best software developers from Latin America and writing great content on how to do that!

Brazil's Best in US Tech: Elevate Projects with Elite Developers

Harness the Vibrant Talent of Brazilian Developers: Elevate Your Projects with Trio’s Elite Tech Teams, Pioneering Innovation and Trusted for Global Success