Routing with React Router

Navigating through pages in a React application is made possible using a library called React Router Dom.

We will walk through Routing with an example.

First we will use vite to quickly spin up a React project.

npm create vite@latest

Enter your project name and select all options you would prefer when prompted.

Here is my preferred configuration.

Install all dependencies using npm install

To install react-router-dom, run the following command

npm i react-router-dom

Run the app using npm run dev

Create a components folder under the src directory and then create two components: Home and About inside the components folder.

ROUTING

For routing, create a folder called router under src and within it, create index.tsx.

Our folder structure should now look like this:

Now inside our router file, we will create routes for our Home and About pages as follows.

import { createBrowserRouter } from "react-router-dom";
import Home from "../components/Home";
import About from "../components/About";


const router = createBrowserRouter([
  {
    path: "/",
    element: <Home/>,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

export default router;

Note that we imported createBrowserRouter from react-router-dom. This is the recommended router for all React Router web projects. It uses the DOM History API to update the URL and manage the history stack.

We then go to our App.tsx file and replace everything within it as follows.

App.tsx

import "./App.css";
import { Outlet } from "react-router-dom";

function App() {
  return (
    <>
      <Outlet />
    </>
  );
}

export default App;

You'll notice we imported Outlet from react-router-dom and added it in our return statement. An Outlet should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route. In this case, our parent route element is the App.tsx file and the child routes are Home.tsx and About.tsx

Lastly, we will update our main.tsx file with RouteProvider from react-router-dom

We import our router first and pass it into RouterProvider. All data router objects are passed to this component to render your app and enable the rest of the data APIs.

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import router from "./router/index.tsx";
import { RouterProvider } from "react-router-dom";

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

Now if we go to the browser you can navigate routes between our two pages!

Home Page

About Page

That's all you need! Or is it?

Suppose you tried accessing a route like /home, what do you think will happen? Let's see.

Yikes! We had not specified a route for /home. We only put two routes: / and /about. To fix this, we can add a route to handle non-existent routes.

Firstly, create a component that will render whenever a user accesses a non existent route.

import React from "react";

const Error = () => {
  return <div>This is the error page</div>;
};

export default Error;

Next, we go to our router file, import the Error component we just created, and add a path to handle non-existent routes as follows:

 {
    path: "*",
    element: <Error />,
  },

And this is our result if we go to a non-existent route:

This tutorial is just a tip of the iceberg when it comes to React Router. I would encourage you to explore more and see what React router has to offer you. The full documentation of react-router can be found at: https://reactrouter.com/en/main

Follow me on:
LinkedIn: Paul Otieno
Twitter: me_huchoma
Instagram: paul_dreamer_

Happy Coding! 🥂