React Router Quick Start Guide

Check prerequisites

To follow this guide you will need a React JS application. You can bootstrap one easily by following the steps in our React JS guide located in the Prerequisites section.

Installing the React Router package

Please run the commands in the above Configuration Tool where we install the React Router package using the package manager of your choice.

Adding the Router Provider

The Router Provider is a component that will allow us to render our routes in a given part of our application. Think of it this way: you have a component that will render another component based on the URL path we have in our browser. To add this Router Provider to you application please follow the corresponding section of the official guide. Please note, your main entry point might be called  index.js or  index.ts.

Base Router setup

With this, we now have a basic setup of routing. What happens here is that the RouterProvider component will check if the URL in the browser is known to it and render the appropriate component in the location of the RouterProvider component (Line 15). Currently we only have one path (Line 7 to Line 10) that will render out a div with the content of Hello world!. Let's add a second route just for practice.

Adding a second route

We have added a second route that will render out a more complex structure when we load the /about route in our browser.ExplanationWhen we mention loading a route or location in the browser we mean loading the route relative to the URL your app is running on. If your app is running on the default http://localhost:3000 URL then the aforementioned route would be located at http://localhost:3000/about. Similarly the first route would be located at http://localhost:3000 because in that case we do not have anything after the /Since the element property accepts JSX we can (and should) use our own components instead of inlining the content. Let's do a little refactoring.

Extracted our content into a separate component

Much better! We can go about extending our  About.jsx|tsx file easily and not have a big mess in our  main.jsx|tsx (or  index.jsx|tsx)