1
00:00:00,650 --> 00:00:04,650
In this video we're going to start to talk about how we handle navigation between different routes.

2
00:00:04,680 --> 00:00:06,700
Inside they react rodder application.

3
00:00:06,960 --> 00:00:12,090
So at present the only way that a user can navigate between the two routes that we have to find is by

4
00:00:12,120 --> 00:00:14,970
changing the address inside the address bar.

5
00:00:14,970 --> 00:00:20,280
So for example if I want to go back to my route route I would have to delete page 2 and then hit enter

6
00:00:20,370 --> 00:00:23,300
and then I can see Page 1 appear on the screen.

7
00:00:23,340 --> 00:00:29,430
So let's figure out how we can somehow more easily navigate between different routes inside of our application.

8
00:00:29,430 --> 00:00:35,040
Now if this was a traditional application using just straight female pages doing this navigation be

9
00:00:35,040 --> 00:00:41,460
very easy and very straightforward we could do something inside of our two separate components.

10
00:00:41,610 --> 00:00:49,260
So inside of PAGE ONE right here I might add in an anchor tag that said like navigate to page 2.

11
00:00:49,660 --> 00:00:56,190
And I would give it a rough property of the yourself that I want the user to go to any time they click

12
00:00:56,190 --> 00:00:57,080
on this link.

13
00:00:57,090 --> 00:01:03,030
So for example for going over to page 2 I might give it an HGF of page 2 and then to make sure that

14
00:01:03,030 --> 00:01:06,540
a user could successfully navigate back to page 1.

15
00:01:06,690 --> 00:01:12,780
I would copy paste that anchor tag down to page two down here but I would change the ref to be just

16
00:01:12,780 --> 00:01:17,680
forward slash and then I would probably change the text to say navigate to page 1 like so.

17
00:01:18,070 --> 00:01:18,290
OK.

18
00:01:18,310 --> 00:01:19,790
So let's test this out.

19
00:01:19,830 --> 00:01:23,590
Now this is how we handle navigation in a traditional each T.M. app.

20
00:01:24,860 --> 00:01:29,150
So if I go back over I see navigate to page 2 I can click on that link.

21
00:01:29,300 --> 00:01:33,950
I then see my page to component appear on the screen and then I can click on that link again and go

22
00:01:33,950 --> 00:01:35,540
back over to page 1.

23
00:01:35,660 --> 00:01:40,680
So it might appear that this is working perfectly and then we can navigate between these different routes.

24
00:01:40,790 --> 00:01:46,550
But unfortunately although this appears to be working well or working as we would expect it's not actually

25
00:01:46,550 --> 00:01:50,510
how we want to handle navigation inside of a re-act rudder app.

26
00:01:50,540 --> 00:01:55,540
So we would say that this approach of using anchor tags would be bad.

27
00:01:55,670 --> 00:01:59,810
I'm going to put that text in here to see if you reference this code in the future you understand that.

28
00:01:59,810 --> 00:02:02,540
No we don't want to use anchor tags with re-act router.

29
00:02:02,540 --> 00:02:06,330
So let me tell you why we do not want to use anchor Tex.

30
00:02:06,370 --> 00:02:08,950
All right so a quick diagram right here.

31
00:02:08,950 --> 00:02:14,500
So here's what happens when you add in an anchor tag to your application and then a user clicks on it.

32
00:02:14,500 --> 00:02:19,900
This is essentially the process that your browser goes through for every standard anchor tag out there

33
00:02:19,900 --> 00:02:20,770
on the Internet.

34
00:02:20,770 --> 00:02:25,750
So this is the normal operation of your browser so you add an anchor attached your application with

35
00:02:25,750 --> 00:02:31,690
an 8 Tref of something like splash page 2 and then at some point time either you click it or your user

36
00:02:31,690 --> 00:02:33,620
clicks it.

37
00:02:33,640 --> 00:02:41,200
Now what your browser does is make a request to localhost 3000 splash page to that's going to make a

38
00:02:41,200 --> 00:02:43,650
request to our re-act development server.

39
00:02:43,660 --> 00:02:48,140
Anytime you make a request to a reactive elements server it's going to respond with our index.

40
00:02:48,190 --> 00:02:49,120
Each file.

41
00:02:49,210 --> 00:02:53,770
Even if you attempt to navigate to slash page two and I'll tell you a little bit more about that in

42
00:02:53,770 --> 00:02:54,370
just a second.

43
00:02:54,370 --> 00:02:58,660
But right now I just understand that if we make a request to slash page two we're going to always get

44
00:02:58,660 --> 00:02:59,560
back or index.

45
00:02:59,590 --> 00:03:05,150
Each e-mail file the same one that is inside of our public directory.

46
00:03:05,180 --> 00:03:11,810
Now when the browser receives that index each team file it's going to take whatever current HMO document

47
00:03:11,840 --> 00:03:15,770
it's showing on the screen and it's going to remove all that HGL from the screen.

48
00:03:15,800 --> 00:03:18,300
It's going to completely dump all that HMO.

49
00:03:18,440 --> 00:03:23,630
And in addition it's also going to dump all of the javascript code and all the javascript variables

50
00:03:23,660 --> 00:03:26,320
and data inside of your application as well.

51
00:03:27,170 --> 00:03:32,240
Now that right there is specifically why we do not want to use anchor tags inside the reactor outer

52
00:03:32,240 --> 00:03:33,260
application.

53
00:03:33,830 --> 00:03:39,520
If you put anchor tags inside of your app and then you click on one you're making a brand new request

54
00:03:39,530 --> 00:03:44,750
to some outside server that's going to return a brand new HD document and then show it on the screen

55
00:03:45,260 --> 00:03:50,900
during that process the normal operation of the browser is to dump all variables in memory all javascript

56
00:03:50,900 --> 00:03:52,970
data gets entirely dumped.

57
00:03:53,030 --> 00:03:58,150
So that means that in the context of your reaction redux application any data that you had loaded up

58
00:03:58,160 --> 00:04:03,410
like any API requests or anything that user had typed in anything whatsoever is going to be 100 percent

59
00:04:03,410 --> 00:04:06,770
white and you entirely lose access to it.

60
00:04:06,860 --> 00:04:12,530
And so you would have to Rifat all that data a second time or have your user type all that data in which

61
00:04:12,530 --> 00:04:17,490
is obviously something that we probably don't want to happen inside of our app.

62
00:04:17,580 --> 00:04:22,440
Now after the browser loads up the new index to a single file it's going to regroup our application

63
00:04:23,070 --> 00:04:27,990
execute the javascript code inside their inner application is going to start up a second time but this

64
00:04:27,990 --> 00:04:31,460
time it's not going to have any of the data that it just had two seconds ago.

65
00:04:31,800 --> 00:04:35,500
So this entire process right here is what absolutely always happens.

66
00:04:35,520 --> 00:04:38,220
Any time a user clicks on an anchor tag.

67
00:04:38,370 --> 00:04:43,830
And it's what we do not want to do inside of a re-act Rotterdam application.

68
00:04:43,830 --> 00:04:48,260
All right so now that we understand how we're not going to handle navigation Let's take a quick pause.

69
00:04:48,300 --> 00:04:52,590
When we come back the next section I'll show you how we're going to handle navigation inside of a re-act

70
00:04:52,590 --> 00:04:53,450
router app.

71
00:04:53,490 --> 00:04:55,610
So quick break and I'll see you in just a minute.