Understanding React Router

Getting started

You'll need a React web app to get started using React Router in a web app. If you don’t have one already, using the Create React App is recommended. It's a well-known tool that works nicely with React Router. 

To use React Router, you must first install it from the public npm registry with either npm or yarn. You'll also need to import BrowserRouter, Route, and Switch from the react-router-dom package. We’ll explore each of them in detail in the forthcoming sections.

Incorporating the React Router

BrowserRouter

In order to function correctly, React Router must be aware of and control your app's location. It does this through the use of its BrowserRouter component.

Behind the scenes, BrowserRouter makes use of the history library as well as React Context. The history library assists React Router in keeping track of the application's browsing history by utilizing the browser's built-in history stack, and React Context aids in making history available wherever React Router needs it.

From the perspective of using BrowserRouter on the web, the most vital thing to keep in 

mind is to make sure that the app is wrapped inside of the BrowserRouter component.

Now that we’ve learned how to enable the ReactRouter, let’s look at how to create a new route.

Route

In simple terms, Route allows you to link the location of your app to various React components.

Multiple routes can match on a single URL using our Route components in this configuration. You might want to do that occasionally, but most of the time, you want React Router just to render the optimal route. Fortunately, this can be easily accomplished using Routes.

When you have one or more Routes, you should probably wrap them in a  Routes.

This is because it's Routes duty to comprehend all of its children's Route components and correctly pick which ones to render.

Let’s move on to how we’ll link pages together.

Link

So far, we’ve learned how to use Routes and Route to map the app's location to specific React components, and the next step is to navigate between them. The Link component serves this function.

A to prop is passed on to the Link component, determining the path the user must be directed to.

In order to have more control over link, a ‘to’ object can be passed. This allows you to add a query string using the search property or provide any data to the new route via the state property.

Walkthrough

Let’s review all the concepts we’ve discussed so far using a simple example.

We’ll make a loose resemblance to a basic landing page.

First, we wrap our app in the BrowserRouter element.

index.js

Next, we add the route tags.

Now, import the components into the app. You may want to put them in a different "components" folder to keep the code tidy and understandable.

So far, our site can only be accessed by entering the URLs. To add clickable connections to the site, we utilize the React Router Link element and create a new Navbar component. 

Voila! We’ve now made a single page app that can navigate around using clickable links.

Frequently Asked Questions

1. How does the link tag work?
   Under the hood, the link tag renders an anchor tag with a real href. This also aids the people who use keyboards for navigation.
   
    
2. How to decide when to use an anchor tag vs Link tag?
   If the href attribute is pointing to an external link, the use of <a> tag is recommended, but if the href points to a URL within the same app, you should use a link tag.
   
    

Key Takeaways

That's all there is to the fundamentals of React Router. The anchor tags are now a thing of the past. Instead, use React Router to move throughout a React project effortlessly. It's neat and tidy, and it makes adding and removing pages much more manageable.

If you want to learn advanced front end web development, Coding Ninjas has one of the best courses available, which you can find here.

Thank you for reading!