React-Router-Dom as told by a noob :)

I began my Phase 2 project by deciding to build out a webpage using an open source D&D 5e API. I learned pretty quickly, that the documentation was amazing but, some of the structures inside the JSON were rather difficult to parse out... But that's a topic for a different time.

I wanted to focus on the React-Router-Dom library and my routes and try to explain, As best as I can, how it works to give myself a better understanding and perhaps help some other soul who happens to find themselves here.

Below is my Routes.js file.

const routes = [
    {
        path: '/',
        element: <App />,
        children: [
            {
                path: '/',
                element: <Home />
            },
            {
                path: '/classes',
                element: <Classes />,
                children: [
                    {
                        path: "/classes/:id",
                        element: <ClassInformation />
                    }
                ]
            },
            {
                path: '/spells',
                element: <Spells />,
                children: [
                    {
                        path: "/spells/:id",
                        element: <SpellInformation />,
                        children: [
                            {
                                path: "/spells/:id/:id",
                                element: <Spell />,
                            }
                        ]
                    }
                ]
            },
            {
                path: '/pick-a-class',
                element: <Classform />
            },
            {
                path: '/party',
                element: <Party />
            }
        ]
    }
]

Fairly straightforward but, what the heck does it all mean?

Well let's start from the top.

routes is an array of route configurations (an object).
Each route configuration is itself an object with properties such as path and element.
The Path property represents the URL path for the route.
The Element property represents the React component to be rendered when the route is matched.

Now, let's break down the nested structure!

The top-level route has a path of '/' and its element is the <App /> component. It also has children, which are nested routes.

The first Child route has a path of '/' (the Root path) and its element is the <Home /> component.

The Second Child route has a path of '/classes' and its element is the <Classes /> component. It ALSO has a nested route under the children property with a Dynamic parameter labeled :id (used to capture the Class ID) and its element is the <ClassInformation /> component.

HOLD ON NOW

What's a Dynamic Parameter?! Well dear reader, I'm glad I foresaw your question!

In the context of routing, a dynamic parameter refers to a placeholder in the URL path that can capture different values as part of the route.

In the code I provided, the dynamic parameter (/classes/:id) in certain route paths is a dynamic parameter. It means that the route will match any path that follows the pattern "/classes/" and is followed by some dynamic value.

For instance, if the URL is "/classes/123" the value of :id would be "123". In my code that's not labelled here - the :id is itself fairly dynamic because I wanted to reuse the Class Sidebar I created!

<Link className={"link-text"} to={`${linkInfo}${characterClass.index}`}>{characterClass.name}</Link>

My ${linkInfo} is passed into this component and is the string of the first start of the URL. In the case above it would be /classes/ while the ${characterClass.index} is the index value of the class in the higher component (in this case, it's each individual class in the ClassList that was rendered out from the API).

This means that each Character class is given its own unique webpage URL that is rendered out from the component I made for them! Pretty neat!

BACK TO THE ROUTES

So going down the list you can see the pattern. Each of my components is given a Route and URL. Each component is rendered when the URL is changed. Each URL is changed based on the NavBar or other navigations in my web application. All in all, it's really neat!