How to effortlessly implement client-side routing with ReactJS using React Router v6

In order to use this guide, you must first have a working React app OR follow along using this demo.

What is client-side routing and React Router?

• Client-side routing is the internal handling of a route inside of your JS file that is rendered to the front end (or client).
• React Router is the standard routing library for React.

Getting Started

In the parent component of the pages you would like to route to, import BrowserRouter and Route, and Routes from React Router.

import { BrowserRouter, Route, Routes } from "react-router-dom";

Next, render BrowserRouter around the components that you will be using. In this example, we have the components Home, About, and Topics.

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const Example = () => (
<BrowserRouter>
  <Home/>
  <About />
  <Contact />
</BrowserRouter>
)

Now, wrap them with Routes. This is new in React Router v6.

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const Example = () => (
<BrowserRouter>
  <Routes>
    <Home/>
    <About />
    <Contact />
  </Routes>
</BrowserRouter>
)

Great, now if we want to actually route to these components whenever a button is clicked. (Or some other event, of course). To do so, import Route from our library and pass the components as props to the route.

You also need to pass a string with the desired path to route. It's a good idea to stick with "/" for the main or "home" component/s of your app.

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const example = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="/about" element={<About />} />
      <Route path="/about/contact" element={<Contact />} />
    </Routes>
  </BrowserRouter>
)

Now we can link to these components using the paths we defined. Great!

Incorporating the routes into our app

If you have a button that you want to use to link to these components, all you need to do is import Link from our library in the component that you want route from.

Plain text works here, but I chose to add a Button component so it looks a little nicer. Now that we have made a component to link everything up, all we have to do is import it to the root component and put the component inside of the BrowserRouter to be rendered inside of Example

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const Example = () => (
  <BrowserRouter>
    <Buttons/>
    <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="/about" element={<About />} />
      <Route path="/about/contact" element={<Contact />} />
    </Routes>
  </BrowserRouter>
)

You're going to want to make sure that it's inside of the component, but you don't need it inside of since it's they are just the buttons and not components meant to be routed to.

Now, whenever we click on a button in ButtonContainer, the linked component will render. And whenever you click another button, the previous component will unmount and then the next linked component will render.

Lastly

This pretty much works like a page redirect, but faster since we don't have to retrieve HTML from a web server or rerender unnecessary components.
This is the power of React Router!

In this article we learned how to implement basic client-side routing in React using React Router v6 and discovered just how simple it can be!
I have gotten some interest in nested routing, so if you'd like to see another article on React Router leave a comment! HAPPY CODING!!!