1
00:00:03,000 --> 00:00:05,259
This is a quick exercise for

2
00:00:05,259 --> 00:00:07,519
you on links and navigation.

3
00:00:07,599 --> 00:00:09,525
We added links to the main

4
00:00:09,525 --> 00:00:11,302
sections of our website,

5
00:00:11,377 --> 00:00:13,381
and they're in the header, so

6
00:00:13,381 --> 00:00:15,385
they're visible on all pages.

7
00:00:15,454 --> 00:00:19,156
Now, we also want some links in the Reviews page,

8
00:00:19,156 --> 00:00:22,450
listing the individual games we reviewed.

9
00:00:22,450 --> 00:00:24,728
So, the exercise is simply to

10
00:00:24,728 --> 00:00:27,006
add a list to this component,

11
00:00:27,084 --> 00:00:29,379
with an item for each review

12
00:00:29,379 --> 00:00:32,667
linking to the correct page for that game.

13
00:00:32,667 --> 00:00:35,464
If you want to do this, stop the video now,

14
00:00:35,464 --> 00:00:37,760
and restart it once you're done.

15
00:00:37,760 --> 00:00:43,244
I'll show you my code in a few seconds.

16
00:00:43,244 --> 00:00:45,545
Ok, let's look at the solution.

17
00:00:45,545 --> 00:00:49,704
I simply added an unordered list with two items,

18
00:00:49,704 --> 00:00:52,997
using the Link component with, as href,

19
00:00:52,997 --> 00:00:55,109
the path for each review,

20
00:00:55,193 --> 00:00:58,514
and the game title as the link text.

21
00:00:58,514 --> 00:01:00,658
You can see the result in the page.

22
00:01:00,658 --> 00:01:02,456
If we click "Hollow Knight"

23
00:01:02,456 --> 00:01:04,697
we'll see the page for that review.

24
00:01:04,697 --> 00:01:06,007
And if we go back,

25
00:01:06,007 --> 00:01:09,311
by the way, note that clicking the back button

26
00:01:09,311 --> 00:01:12,605
will also use client-side navigation.

27
00:01:12,605 --> 00:01:14,751
But if we follow the other link,

28
00:01:14,751 --> 00:01:17,190
of course we'll see our other review.

29
00:01:17,190 --> 00:01:19,681
It was a very simple exercise.

30
00:01:19,681 --> 00:01:22,482
If you want to go a bit deeper however,

31
00:01:22,482 --> 00:01:25,793
you can try inspecting the network requests

32
00:01:25,793 --> 00:01:28,212
using the Chrome Developer Tools,

33
00:01:28,212 --> 00:01:31,815
and see how prefetching works in this case.

34
00:01:31,815 --> 00:01:34,346
If you start from the home page,

35
00:01:34,346 --> 00:01:36,493
and then navigate to Reviews,

36
00:01:36,493 --> 00:01:38,762
will it prefetch the additional

37
00:01:38,762 --> 00:01:40,153
links on that page?