1 00:00:01,140 --> 00:00:04,890 We just finished some initial set up of re-act router inside of our index. 2 00:00:04,900 --> 00:00:08,800 JS file by importing router and browser history. 3 00:00:09,060 --> 00:00:14,050 And we kind of passed off control of rendering our application to our router here. 4 00:00:14,520 --> 00:00:19,770 We now need to do one last piece of configuration for Riak Crowder before it's Ashkan do anything for 5 00:00:19,770 --> 00:00:19,980 us. 6 00:00:19,980 --> 00:00:25,440 We need to tell it what valid routes our application has and the appropriate components to show for 7 00:00:25,440 --> 00:00:27,050 each of these routes. 8 00:00:27,180 --> 00:00:30,970 So we're going to set these rules up in a separate file from index Dot. 9 00:00:31,060 --> 00:00:31,890 Yes. 10 00:00:32,280 --> 00:00:37,750 In our source directory over here I'm going to make a new file called routes. 11 00:00:37,800 --> 00:00:46,020 JS Zaretsky JS is going to be essentially our mapping of hay for this Ural please show this component 12 00:00:46,020 --> 00:00:46,090 . 13 00:00:46,090 --> 00:00:48,630 And for this girl please show that component. 14 00:00:48,960 --> 00:00:53,740 So we're going to import a couple of packages here at the top to help us define these rules. 15 00:00:53,770 --> 00:01:02,910 We'll import re-act from react in poor routes and index routes and we'll talk about what both of these 16 00:01:02,910 --> 00:01:10,290 are in just a second from re-act router and then we're also going to import our initial component that 17 00:01:10,290 --> 00:01:12,630 we were rendering before the app component. 18 00:01:12,870 --> 00:01:22,020 So import app from we're currently in source are going to say that current directory into components 19 00:01:22,080 --> 00:01:27,990 and then app so current directory into components. 20 00:01:28,950 --> 00:01:34,640 So the round object here is what is the object that we're going to use to define a match between a u 21 00:01:34,650 --> 00:01:36,660 r l and a component. 22 00:01:36,830 --> 00:01:39,600 We can use index route just yet but we will shortly. 23 00:01:39,600 --> 00:01:47,160 So just hold on on index route for now let's put route to use by defining a mapping between a possible 24 00:01:47,160 --> 00:01:48,460 route and a component. 25 00:01:48,570 --> 00:01:57,820 So to do so all we have to do is write routes path component. 26 00:01:58,360 --> 00:02:07,020 And so this matches the path of forward slash to the component of AB. 27 00:02:07,170 --> 00:02:13,660 In other words whenever the user is at this path show this component right here. 28 00:02:14,040 --> 00:02:18,660 Now you might be saying yourself well forward slash like what you are is that you know what does that 29 00:02:18,660 --> 00:02:19,350 mean out to what. 30 00:02:19,470 --> 00:02:21,070 How do I navigate there. 31 00:02:21,480 --> 00:02:29,130 So forward slash refers to anything or whatever we're looking at say like dot com slash or dot net slash 32 00:02:29,130 --> 00:02:29,160 . 33 00:02:29,160 --> 00:02:37,830 So for example if we navigated to Google dot com slash that would be equivalent to path equals slash 34 00:02:37,830 --> 00:02:38,460 right here. 35 00:02:38,460 --> 00:02:42,760 I would say renderers. 36 00:02:43,770 --> 00:02:45,830 Oops there you go. 37 00:02:46,140 --> 00:02:52,670 So something like just going to our roots domain name like say Google dot com or blog post dot com that 38 00:02:52,860 --> 00:02:54,200 has this for Slash in here. 39 00:02:54,210 --> 00:02:57,300 And that's the part of the path that react rather curious about. 40 00:02:57,360 --> 00:03:01,260 So this would again show our component operate here. 41 00:03:02,310 --> 00:03:02,630 OK. 42 00:03:02,640 --> 00:03:04,560 So we've got our first round happening here. 43 00:03:04,560 --> 00:03:10,480 We've defined a route and it maps a path to showing a particular component. 44 00:03:10,590 --> 00:03:13,320 Now we need to basically take this mapping right here. 45 00:03:13,320 --> 00:03:19,420 This rule set and makes sure that re-act router back over index dot G-S knows about it. 46 00:03:19,650 --> 00:03:22,830 So what we'll do is we will export this rule. 47 00:03:22,860 --> 00:03:31,540 So we'll say export default and then we'll wrap our routing here inside of some parentheses. 48 00:03:32,310 --> 00:03:34,610 OK so let's go ahead and save this. 49 00:03:34,800 --> 00:03:40,650 And now we're going to go back over the index start JS and feed that mapping into our router. 50 00:03:41,070 --> 00:03:51,930 So at the top we'll import those routes say import routes from routes and now we need to feed this wrapping 51 00:03:51,930 --> 00:03:53,130 into our router. 52 00:03:53,550 --> 00:03:57,200 So we'll say routes is routes. 53 00:03:57,240 --> 00:04:02,290 Here are the here's the mapping between your Elle's and components that we care about. 54 00:04:02,310 --> 00:04:03,440 Please use these. 55 00:04:03,440 --> 00:04:04,760 That's all we're saying here. 56 00:04:05,160 --> 00:04:05,640 OK. 57 00:04:05,730 --> 00:04:11,910 So let's refresh or save this file and pop open our browser and just confirm that this actually works 58 00:04:11,910 --> 00:04:12,960 . 59 00:04:13,040 --> 00:04:19,770 So I up open my terminal terminal here just in case you get any errors and then refresh and you'll notice 60 00:04:19,770 --> 00:04:21,320 that everything looks the same. 61 00:04:21,330 --> 00:04:25,150 I'm actually refreshing here but this is actually exactly what we want. 62 00:04:25,380 --> 00:04:27,550 I'm at the URL localhost. 63 00:04:27,630 --> 00:04:29,530 1880 really slash. 64 00:04:29,620 --> 00:04:31,410 You know it's actually there. 65 00:04:31,410 --> 00:04:37,250 And so the forward slash maps to our app component and thus we see our app component right here. 66 00:04:37,680 --> 00:04:42,230 Let's try navigating to say like pose you know what happens when we go here. 67 00:04:43,020 --> 00:04:44,690 Well check it out. 68 00:04:44,700 --> 00:04:50,610 We got an error message over here that says re-act router location post did not match any routes so 69 00:04:50,610 --> 00:04:57,240 we haven't defined a mapping between slash posts and any components yet so re-act router says I don't 70 00:04:57,240 --> 00:04:58,690 know about that you are all you know. 71 00:04:58,860 --> 00:05:03,210 I see the U R L I see the path up here but I don't know what to show. 72 00:05:03,210 --> 00:05:08,390 Given that component are given that route I don't know what what component you want me to show you. 73 00:05:09,290 --> 00:05:14,940 OK so let's move on to the next section and start doing a little bit more fancy routing than just our 74 00:05:14,940 --> 00:05:16,240 home directory here.