DEV Community

Cover image for Configuring React Router
Nolan Miller
Nolan Miller

Posted on • Updated on

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

Responsively Screenshot

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)