1
00:00:00,760 --> 00:00:05,740
All right, let's take a look at a solution, so step number one inside of our Appalachia's file, it

2
00:00:05,740 --> 00:00:10,120
looks like there's already an import statement here for getting the extreme details component.

3
00:00:10,570 --> 00:00:16,840
So all we should have to do is add in another route with a path of streams, slash details.

4
00:00:17,680 --> 00:00:22,000
I'll put in exact and then the component that I want to show.

5
00:00:24,190 --> 00:00:25,000
Is going to be.

6
00:00:26,270 --> 00:00:31,970
Stream details and notice that it's wrapping my code here just because I'm a little bit space constrained,

7
00:00:31,970 --> 00:00:36,320
but for you, you might want to keep this entire root component all in the same line just for legibility.

8
00:00:37,990 --> 00:00:42,010
Now, just because we added this route in doesn't mean that we can actually see anything related to

9
00:00:42,010 --> 00:00:42,240
it.

10
00:00:42,280 --> 00:00:45,340
We need to actually be able to navigate over to that different path now.

11
00:00:45,930 --> 00:00:49,110
So for that, we're going to open up our stream list JS file.

12
00:00:49,990 --> 00:00:53,380
There's already an import statement inside of here for a link component.

13
00:00:53,980 --> 00:00:57,250
So I'm going to place a new link directly after that three.

14
00:00:59,050 --> 00:01:05,650
I'll give it some text of something like go to stream details and then remember, we need to assign

15
00:01:05,650 --> 00:01:07,090
it a two prop.

16
00:01:08,550 --> 00:01:14,550
So whenever a user clicks on this link, we're going to navigate them to streams details.

17
00:01:16,410 --> 00:01:18,900
Now, we can test that right away if I click on the link.

18
00:01:19,560 --> 00:01:20,400
Hey, there we go.

19
00:01:20,400 --> 00:01:24,680
And navigated me over to the stream details component, but now we're kind of stuck here.

20
00:01:24,720 --> 00:01:31,200
So we would want to navigate back over to a stream list for that will go to stream details.

21
00:01:32,100 --> 00:01:34,050
And we'll add in a link here as well.

22
00:01:41,560 --> 00:01:47,890
And for this link, I'll give it a two prop of root, root or just forward slash by itself, that should

23
00:01:47,890 --> 00:01:52,600
take us back to the stream list, then we can test this full flow out.

24
00:01:52,720 --> 00:01:54,790
So I will click on Go to stream details.

25
00:01:55,150 --> 00:01:56,220
Go back to stream list.

26
00:01:56,350 --> 00:01:56,710
Yep.

27
00:01:57,100 --> 00:01:58,290
Looks like it's working pretty well.

28
00:01:59,400 --> 00:02:04,080
OK, final step, let's run some tests and make sure everything is working as expected.

29
00:02:06,780 --> 00:02:07,970
All right, fantastic.

30
00:02:08,340 --> 00:02:11,940
Well, let's take a quick pause right here and get back on track in the next video.