1
00:00:01,560 --> 00:00:05,430
All right, so last thing we need to do is make sure that on Mako is holding down command and clicking

2
00:00:05,430 --> 00:00:10,590
a link were on Windows, holding down control and clicking on a weak link, opens that link inside of

3
00:00:10,590 --> 00:00:11,070
a new tab.

4
00:00:12,320 --> 00:00:14,610
So to do so, we're gonna go back to our link component's.

5
00:00:15,770 --> 00:00:17,270
We're going to find the unclick function.

6
00:00:17,950 --> 00:00:21,010
And then inside of here, we're going to add in a little check on that event.

7
00:00:21,520 --> 00:00:29,860
We're going to say if E bent dot Medda key or event dot C TRL key.

8
00:00:31,290 --> 00:00:34,010
These are both boolean properties on Mac OS.

9
00:00:34,170 --> 00:00:36,060
We make use of metal key on windows.

10
00:00:36,090 --> 00:00:37,550
We make use of control key.

11
00:00:38,510 --> 00:00:42,980
These are going to be either true or false to indicate whether or not that respective key was held down

12
00:00:43,010 --> 00:00:44,600
when a user clicked on this thing.

13
00:00:45,320 --> 00:00:49,820
So if either these are true, then we're going to not want to run any of this stuff.

14
00:00:50,180 --> 00:00:54,650
Instead, we're going to want to allow the browser to just do its normal thing, which is to open up

15
00:00:54,650 --> 00:00:57,290
a new tab and navigate to the ATF on this link.

16
00:00:58,630 --> 00:01:02,410
So if either of these cases are true, we're going to return early.

17
00:01:03,760 --> 00:01:04,630
And that's pretty much it.

18
00:01:05,610 --> 00:01:06,720
So we can now save this.

19
00:01:07,440 --> 00:01:08,760
Go back over and do a quick test.

20
00:01:09,280 --> 00:01:13,950
So now on Windows, you can hold down control and click on the link and on Mac OS, you can hold down

21
00:01:13,980 --> 00:01:15,300
command and click on the link.

22
00:01:15,870 --> 00:01:16,680
I can do that right now.

23
00:01:17,010 --> 00:01:21,150
And you'll see that it does, in fact, open up a new tab navigated to the appropriate.

24
00:01:21,170 --> 00:01:21,630
You are El.

25
00:01:22,940 --> 00:01:23,250
All right.

26
00:01:23,450 --> 00:01:24,470
Well, that is pretty much it.

27
00:01:24,500 --> 00:01:29,480
That is some basic navigation without making use of react router or anything like that.

28
00:01:30,080 --> 00:01:33,140
Now, remember, we are going to cover react rather later on inside the course.

29
00:01:33,560 --> 00:01:38,450
But I think you're going to see that a lot of stuff we just put together looks very familiar inside

30
00:01:38,450 --> 00:01:39,230
of reactor router.

31
00:01:39,290 --> 00:01:43,580
You're going to have a link component that works very similar to the one we just put together.

32
00:01:44,150 --> 00:01:48,620
And in React router, you are also going to have a root component that works very similar to the one

33
00:01:48,620 --> 00:01:49,880
we just put together as well.

34
00:01:50,540 --> 00:01:54,950
So even though we didn't make use of react router, believe it or not, you actually have some knowledge

35
00:01:55,220 --> 00:01:56,420
around how it works.

36
00:01:58,150 --> 00:01:59,920
All right, well, this has been a lot of fun.

37
00:02:00,400 --> 00:02:03,040
Let's take a pause right here and continue in just a moment.