Configuring React Router

The second day is always a grind in my experience. Some of the excitement has passed, the work has truly set in. It’s never on day one that I realized the size of the project that I’ve just started.

It’s been probably about a month since I’ve worked on a React, so the biginnings are moving a little slower than I want. Once I get more of the structure built, though, I will feel more comfortable and confident.

Under the Hood

Most of the work today looked like this. Not near as exciting as seeing the fleshed out UI come together. However, I got the footer done, AND it’s operational too.

The primary routing of this app is now handled by React Router. I’ve configured React Router a couple of times, and it comes out a little different each time. This configuration might be my favorite so far.

Using a Layout Component

I was having a hard time keeping my footer at the bottom of the screen in every route. I didn’t want to have to render in the Footer on every component, and using an outlet and child routes of the root make for a funky and deeply nested router. So, this time I tried a layout component that wraps each of the components displayed in my routes! Here’s what it looks like:

// Layout.js
import React from 'react'
import Footer from './Footer'

const Layout = (props) => {
    return (
        <>        
            {props.children}
            <Footer />
        </>
    )
}

export default Layout;

Simple. The props.children call here lets me add more components inside Layout and everything will be rendered above the footer, even when I change routes.

Setting Up My Router

I have four primary routes: /, /library, /account, and /about, and to keep my index.js file from getting too cluttered, I did the router configuration in a separate file:

// router.js
import { createBrowserRouter } from "react-router-dom";
import Layout from './Layout/Layout'
import Home from './Home/Home'
import Library from './Library/Library'
import Account from './Account/Account'
import About from './About/About'

const router = createBrowserRouter([
    {
        path: "/",
        element: (
            <Layout>
                <Home />
            </Layout>
        ),
    },
    {
        path: "/library",
        element: (
            <Layout>
                <Library />
            </Layout>
        )
    }, 
    {
        path: "/account",
        element: (
            <Layout>
                <Account />
            </Layout>
        )
    },
    {
        path: "/about",
        element: (
            <Layout>
                <About />  
            </Layout>
        )
    }

])

export default router;

Since I’m tucking the router away, I also thought this might be a good place to render in my Layout componenet, rather than having to do it in each functional component.

All that was left was to add the router provider in index.js :

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client'
import { IconoirProvider } from 'iconoir-react';
import router from './router';
import { RouterProvider } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider 
      router={router}
      fallbackElement={(
          <div><p>Loading...</p></div>
      )}
    >
      <IconoirProvider
        iconProps={{
          color: '#FFF8F4'
        }}>
        <App />
      </IconoirProvider>
    </RouterProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

See why I didn’t want to have the router in here too? Seems like it would be a lot yeah?

So, with these changes, and the addition of React boilerplate to my Home, Library, Account, and About pages, I now have a footer that changes my URL and navigates me through the application.

Tidbits

Something small I learned today that is going to have a big impact is the rfce code snippet! I’ve had these snippets installed for months, but I haven't really taken the time to learn them. I'm kicking myself for that now!

rfce means React Functional Component Export. It automatically generates the following boilerplate:

import React from 'react'

function Home () {
  return (
    <div></div>
  )
}

export default Home

It’s great, and it saved me a ton of time today.

What's Next?

I think I’ll build the About page the next time I sit down, since it will be relatively easy to knock out, and it is pretty static. From there, I have some global components that I need to create!

If you like what you’re reading, give me a follow and share with a friend. Let me know what you’re working on down in the comments, or tell me how I can improve my process!