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 from React Router.
Next, render BrowserRouter around the components that you will be using. In this example, we have the components Home, About, and Topics.
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 component of your app.
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
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 hope this helps with your personal projects, if you have any questions feel free to leave a comment and HAPPY CODING!!!
