🔧 Using React Router v6 with Client-Side Routing

The differences between Router v5 (version 5) and v6 (version 6) are many. In this blog post, I'll be covering what client-side routing is, and how to use React Router to your benefit when working with this type of routing.

Client-side routing is a mechanism through which a user interacts with a webpage. It doesn't require any refreshes or reloads to print new data onto the page; it doesn't require any new GET requests to the server. All of the routing is done with JavaScript. This means: the client's side of the server does ALL of the routing, fetching, and rendering of the information on the DOM for the client to see. The URL should reflect what the user wants to see (ie twitter.com/home, twitter.com/user), which is more intuitive.

Additionally, it's faster overall, which the user always appreciates (not initially, as more must be loaded right off the bat)!

React Router is a client-side router (there are others, such as Hash Router, TanStack, or Hook Router. React Router allows certain components to be displayed based on which URL is called (ie twitter.com/home will render the Home component, twitter.com/user will render the User component).

When naming your endpoints, it is helpful to use the 7 RESTful Routes:

Image source

Do you want a user to be able to create something new on the page? View other items on the page? Those questions are helpful to ask yourself when naming your URL endpoints.

const routes = [
    {
        path: "/",
        element: <App />,
        errorElement: <ErrorPage />,
        children: [
            {
                path: "/home",
                element: <Home />
            },
            {
                path: "/about",
                element: <About />
            },
     //and so on

^ Your routes variable should be stored in routes.js, with each component imported at the top of the file. Each route is an object, and 'routes' is an array of these objects. "path: "/home"" means that your URL will read yoururl.com/Home. Makes sense! You can also render more than one element on a specific path as well.

This example renders App as the parent component, and Home and About as its nested children. App will act as a mechanism through which info is passed down to all its children; anything rendered in App will render in its children as well. The ErrorPage component will render to any of its children that run into an error, letting the user know that something went wrong.

Import your routes into your index.js file:

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import routes from "./routes.js";
import "./index.css"

const router = createBrowserRouter(routes);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<RouterProvider router={router} />);

This links your file with the routes listed to your index.js.
createBrowserRouter takes the routes array imported from routes.js and creates the router that your website will use for navigation; RouterProvider is the component that takes the prop of 'router' and defines it using the routes in the routes.js file. It will then be available throughout your entire application.

It took me some time to understand this, especially because there are so many resources for the syntax of v5 versus v6! Take your time - you've got this! xo

Additional note: To pass props from App to children components, you can use useOutletContext. Here are two additional resources about useOutletContext: 1 and 2. This allows you, the developer, to pass props from parent to child while simultaneously using Router (since you aren't explicitly rendering the children components in your parent component anymore, enabling the passing of props).