00:00:02 Let's focus on routing, or in other words, let me give you a quick React Router v7 crash course, where I'll teach you how to do routing in Modern React.

00:00:14 Let's start from bare beginnings, by deleting our current home route, because we'll do everything from scratch.

00:00:21 Within the routes folder, I'll create another folder, which I'll call admin, and within admin, I'll create a new file called dashboard.tsx.

00:00:33 Instead of which, we can run RAFCE to spin up this new React page.

00:00:39 Unlike Next.js, this won't work automatically so that if we just go to forward slash dashboard, you'll be able to see it.

00:00:46 What you have to do first is head over into this routes.ts file, which you can think of as the configuration file.

00:00:55 Here, you can see that our index route points to the home page, which no longer exists.

00:01:00 So instead of having this index, we can use two additional methods.

00:01:05 One is called layout, and the other one is called route.

00:01:10 To start off, we can simply create a route, which you'll need to import over from React Router dev routes.

00:01:19 So I'll say route right here.

00:01:22 It requires you to pass a name of that route, or in other words, the path, and then you need to pass a location to the file.

00:01:29 So that'll be the routes-admin-dashboard.tsx.

00:01:34 And notice how WebStorm automatically tells me what each one of these params means.

00:01:39 The first one, dashboard, is the path, and the second one is the file.

00:01:43 Pretty cool.

00:01:45 And if you do that, you can see that this dashboard right now, coming from here, I can even call it dashboard page, shows up right here on localhost 5173

00:01:56 forward slash dashboard.

00:01:57 Pretty straightforward, right?

00:01:59 But now let me also show you how we can add something known as a layout.

00:02:03 So within admin, I'll create a new file and I'll call it admin-layout.tsx.

00:02:11 Within it, I'll run RAFCE.

00:02:14 and I'll give this div a class name equal to admin-layout.

00:02:21 Now, this admin layout is coming from index.css.

00:02:25 The only thing we're doing here is applying a bit of a light background color with some padding on the top for the navbar,

00:02:31 and we're also making it a flex container.

00:02:34 So what we can do now is head over into Routes and wrap our route with the layout.

00:02:39 So right here, I'll say layout, coming from React Router at the top.

00:02:45 It's not a component, but a method.

00:02:48 As the first parameter, it requires a path to that file.

00:02:52 So I'll say forward slash routes, forward slash admin, forward slash admin dash layout.

00:03:00 And as the second one, it requires an array of children, which are different routes within that specific layout, so I'll simply put this dashboard route

00:03:11 right within.

00:03:11 If you do it properly, without providing the starting forward slash right here, you should be able to see just the admin layout in your page,

00:03:19 even though you're currently on the dashboard route.

00:03:22 So what you can notice is that by putting something into a layout, it doesn't mean that you have to prepend that route with that name,

00:03:29 like it is in Next.js.

00:03:31 You can think of it more like a Next.js route group, where the route still remains its original part.

00:03:37 But the layout allows you to style it a bit further.

00:03:41 So for example, we might want to display a mobile sidebar right here, or maybe like a regular sidebar.

00:03:49 So I'll put an aside, give it a class name of w-full, max-w of 270 pixels, typically make it hidden, but only show it on desktop devices.

00:04:03 So this is a sidebar for desktop, and I'll say sidebar right here.

00:04:08 So now on mobile, we can see the mobile sidebar, but if we head over to desktop, we can also see the regular sidebar.

00:04:14 But now what matters most is showing the pages within that layout.

00:04:18 They will all have something in common, which are the sidebars, sure, but how do we show the actual page?

00:04:25 Well, I'll render another Asai, which is an HTML5 semantic element, give it a class name of children, and within it, I will render something known as an outlet,

00:04:37 coming from React Router.

00:04:39 This outlet is a component that renders the matching child route of a parent route or nothing if no child route matches.

00:04:47 In simple words, it just shows you the page or the route that we're currently on that is inside of that admin layout.

00:04:54 So for example here, now this admin layout allows us to have this mobile sidebar, but also the contents of the dashboard page.

00:05:02 So if you needed to add a second route, you can do that very easily.

00:05:07 You just create it right here within the same folder, and I'll call it all-users.tsx.

00:05:15 I'll run RAFCE, and this is the page within which we'll display the users table.

00:05:21 This will of course also be a part of the admin dashboard.

00:05:25 So now, back in the routes, you can just duplicate this route, still within the same layout, and I'll say all users.

00:05:35 and pointing to routes admin all users.

00:05:39 So now if you wanted to, you can very easily switch over to all users and both that one and the regular admin dashboard have the mobile sidebar which we'll

00:05:50 implement next.

00:05:50 That's more or less it when it comes to routing.

00:05:53 It's actually pretty simple.

00:05:54 But if you wanted to read a bit more about it, you can see that React Router is a multi-strategy router for React, bridging the gap between React 18 and 19,

00:06:05 where you can use it maximally as a React framework or as minimally as you want.

00:06:10 So there are different ways of using it, but in the most simple way, you can create some routes and then use them as parts of different layouts as I just

00:06:18 showed you.

00:06:19 Don't worry, we're going to dive into more depth of how we can use it later on, such as how we can create dynamic routes as well,

00:06:25 but more or less, it is super intuitive.

00:06:28 For example, if you wanted to nest routes, you would be able to do that just by creating a single route and then adding additional routes as an array to

00:06:36 that route.

00:06:37 But with that in mind, You already know not only the basics, but also how to put those basic routes within the layout.

00:06:44 So I'll close all of the currently open files, and I'll go ahead and commit this by heading over into the terminal, running git add dot,

00:06:53 git commit dash m, and I'll call it routing.

00:06:57 Perfect.

00:06:58 Ready to move on to the next lesson.