React-Router-Relative Path: A Simple Guide For Developers

How does React handle navigation between pages?

React Router makes this process smooth by letting developers define routes and manage navigation easily. One key feature is the react-router-relative path, which helps create routes based on the parent route instead of starting from the application's root. This keeps URLs clean and makes nested navigation simpler.

Let’s break it down step by step!

What is a Relative Path in React Router?

A relative path is a route path that is defined concerning the current URL or its parent path. Instead of specifying a full absolute path, you can use relative paths to navigate within sections of your application without worrying about the complete structure. This is particularly useful in scenarios involving nested routes where child components need to define their route path relative to the parent route.

Example of Absolute vs. Relative Path

Consider a React Router DOM setup where you have a parent route for user profiles and child routes for user details.

Absolute Path Example

1<Route path="/users/:userId/details" element={<UserDetails />} />

In this case, the route path is fixed. No matter where you are in the application, navigating to /users/:userId/details will always take you to the UserDetails component.

Relative Path Example

1<Route path="details" element={<UserDetails />} />

Here, the route path is defined relative to the parent route. If the parent route is /users/:userId, then this relative path resolves to /users/:userId/details.

This approach makes it easier to manage nested routes and ensures that if the parent route changes, the child routes remain functional without modification.

Why Use Relative Paths?

1. Better Maintainability: If you decide to change a parent path, you don’t have to update all its child routes since they automatically adjust.
2. More Flexibility: Relative routes make it easier to manage complex applications with deeply nested routes.
3. Cleaner Code: Your route definitions remain concise, improving readability and maintainability.

When to Use an Absolute Path Instead

While relative paths are extremely useful, there are cases where an absolute path is more appropriate.

Use an absolute path when:

• You need a globally accessible route (e.g., /login, /home).
• A route should always be independent of the parent route.

However, in most cases involving nested routes, it is best to use relative paths for better scalability.

Setting Up Relative Routing with React Router DOM

When working with React Router DOM, setting up relative routing allows you to define a route path relative to a parent route, making it easier to manage nested routes. This approach enhances flexibility, especially when working with React applications that require structured navigation.

Using the Relative Path in the <Route> Component

By default, React Router DOM resolves child routes relative to their parent route. However, explicitly using the relative prop ensures that the path is treated as a relative path rather than an absolute path.

Example: Setting Up Relative Routes

1import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
2import Dashboard from "./Dashboard";
3import Stats from "./Stats";
4
5function App() {
6  return (
7    <Router>
8      <Routes>
9        <Route path="/dashboard" element={<Dashboard />}>
10          <Route path="stats" element={<Stats />} />
11        </Route>
12      </Routes>
13    </Router>
14  );
15}
16
17export default App;

Navigating with Relative Paths

React Router provides multiple ways to navigate between relative routes. These include:

Using <Link> Component with Relative Paths

1<Link to="stats">View Stats</Link>

Using useNavigate for Programmatic Navigation

1import { useNavigate } from "react-router-dom";
2
3function Dashboard() {
4  const navigate = useNavigate();
5
6  const goToSettings = () => {
7    navigate("settings"); // Navigates to 'settings' relative to the current route
8  };
9
10  return (
11    <div>
12      <h2>Dashboard</h2>
13      <button onClick={goToSettings}>Go to Settings</button>
14    </div>
15  );
16}

Best Practices for Relative Routing in React

1. Use Relative Paths Consistently: Always define child routes using relative paths to maintain a structured and scalable routing system.
2. Leverage useResolvedPath for Dynamic Paths: This hook helps construct dynamic relative paths without hardcoding them.
3. Use useNavigate for Programmatic Navigation: The useNavigate hook provides better flexibility compared to useHistory.
4. Avoid Hardcoding Absolute Paths in <Link> Components: Always use relative links where applicable to avoid broken navigation.
5. Structure Routes Modularly: Define routes in a modular way to improve maintainability and scalability.
6. Handle Trailing Slashes Consistently: Ensure uniformity in path definitions to prevent unintended routing mismatches.

Wrapping Up

Using react-router-relative path keeps navigation flexible and easier to manage. Instead of hardcoded absolute paths, relative paths adjust based on the parent route, making updates simpler.

Best practices like useResolvedPath for dynamic paths, useNavigate for programmatic navigation, and well-structured nested routes help create a smoother routing system. These techniques improve code readability and reduce maintenance efforts.

Try different relative path setups and see how they affect navigation. React Router keeps evolving, so staying updated with new features will help keep your projects organized and scalable.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.