DEV Community

Cover image for How to effortlessly implement client-side routing with ReactJS using React Router v6
professorjrod
professorjrod

Posted on

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

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

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

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

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

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!!!

Top comments (3)

Collapse
 
brense profile image
Rense Bakker

Doesn't react router v6 use element instead of component in their Route component? Like this:

<Route path="/about" element={<About />} />
Enter fullscreen mode Exit fullscreen mode

Also I think they require the routes to be wrapped in their Routes component iirc.:

<BrowserRouter>
  <Routes>
    <Route path="/about" element={<About />} />
    {/* ... other routes ...*/}
  </Routes>
</BrowserRouter>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jaredm profile image
professorjrod • Edited

Yes. I'm in the process of rewriting all of my older blogs. This is the v5 way of doing this. I thought I was using v6 but I didn't update the library. Thank you for catching my error Rense. I have corrected the mistakes in my post.

Collapse
 
brense profile image
Rense Bakker

Ah I see! 👍