# React Router Tutorial - How to Set Up React Router
Single-Page Applications (SPAs), built with libraries like React, offer a way to render different components without a full page refresh. This is made possible using React Router. In a React project, the App component serves as the root component. It is the component that is rendered once the page loads.

What happens if you have other components or pages that you would love to render? In this tutorial, I will guide you on how set up React Router and route to other components. Before continuing this tutorial, ensure you have a good understanding of React apps and React components. If not, you might want to refresh your memory by checking out the [React documentation](https://react.dev/).

**How to Install React Router**

Before installing React Router, set up your React app. To be able to use React Router in your project, first you need to install it. Install it by running the command `npm i react-router` in your project terminal. Wait until the installation is complete.

Next, you will import BrowserRouter in your main.js. You need to make React Router available everywhere in your app by wrapping the App component inside BrowserRouter.


**Configuring Your Routes**

To route to different components, you need Routes and Route from react-router. Go ahead and import both into your App component. Let's also create the different components we'll be using: Home, About, Contact, and Products components.

We first use the `Routes` tag. It acts as a container for all the individual routes you'll create.

Next, you'll configure individual routes using the `Route` tag. Each Route accepts two important attributes: path and element.

The **path** attribute is the desired URL path for your component. For example, if you set the path to "/", you're telling the browser this is your root component, i.e your Home page. This is the component that will render when the page initially loads.

The **element** attribute is where you specify the actual component you want to render when a user navigates to the URL defined in the path.

So, to bring this all together, make sure to import your newly created components (Home, About, Contact, Products) into your App component.



**Navigating to Routes**

Now that we've successfully created our routes, we can navigate to them using the URLs defined in their paths. But to make this truly user-friendly, we need to add clickable links that are visible to your users. For this, we'll use the Link tag from React Router.

Start by creating a new component called Navbar. Inside this component, import Link from react-router. The Link component accepts a “to” attribute. The value of this attribute should be the URL you want to navigate to. This URL must correspond to the path you defined in your Route component.

Finally, import the Navbar component into your App.js and render it right before your `<Routes>`. This way, your navigation links will always be visible at the top of your application.



**Conclusion**

In this article, we have seen how to install and configure React Router, and also how to use the Link component to navigate between pages. What is covered in this article simply lays the foundation, There is much more to learn. You can go deeper into this topic by visiting the ofyaficial [React Router Documentation](https://reactrouter.com/).