Installing React Router
In this lesson, we're going to install React Router
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:09] Once we are preparing skeleton for our React project, it's very important to add routing. For that, we are going to use the very popular React Router.
[00:10 - 00:23] React Router is tried and tested, so we don't have to look around for any other alternative to do this. This is basically a collection of navigational components which help render components at different routes.
[00:24 - 00:37] As we know, components are building block of any React application, and this is exactly based on that. Since we are building other applications, we can simply click on web.
[00:38 - 00:49] As you can see, it's as straightforward as it could. If we scroll down a bit and look at the API option, we have the hooks section.
[00:50 - 01:02] Out of these four, I'm pretty sure we'll be using use location, use history, and use peram soak. We also have a browser router, which is basically a wrapper around our routes.
[01:03 - 01:11] We also have links, which work as an anchor tag in JSX. They redirect you to another page without refreshing it.
[01:12 - 01:27] There is also a nav link, which is very similar to links, but the additional feature is that you can add styling to the links here. For example, you'll be able to highlight the current link where the user is currently.
[01:28 - 01:44] We can now simply install it by copying it and open the terminal. Make sure you're inside the client project, now type, npm install react router.
[01:45 - 01:50] And since we are using TypeScript, we also need to install types. Let's hear it.
[01:51 - 02:21] And now type npm install at types slash react router DOM with the save dev flag . Now as we are finishing installing, let's go to the index.psx file.
[02:22 - 02:32] What we need to do is wrap our app component with browser router. Developers usually rename it as router instead of browser router.
[02:33 - 02:48] So what we'll do is import browser router as router. This is from react router DOM.
[02:49 - 03:06] And we'll wrap our app with router. We don't need to pass any parameters for now.
[03:07 - 03:12] It will work fine without any of them. In the next lesson, we will add routes to our application.
[03:13 - 03:22] For example, a different route for login page, a different one for courses page and a different one for description page and so on. I'll see you in the next lesson.