3
3
<EpicVideo url = " https://www.epicweb.dev/workshops/full-stack-foundations/routing/creating-navigation-links-for-seamless-user-experience" />
4
4
5
5
👨💼 Our users want to get around the application quickly. So, we're going to add
6
- a few links in a couple places.
6
+ a few links in a couple of places.
7
7
8
- We want the logo in the header and footer to link to ` / ` .
8
+ We want the logo in the header and the footer to link to ` / ` .
9
9
10
10
On the <LinkToApp to = " /users/kody" /> page, we want to link to the user's notes
11
11
route.
12
12
13
13
On the <LinkToApp to = " /users/kody/notes" /> route, we should link back to the
14
14
` /users/kody ` page. 💰 Tip, you can use a relative path (` .. ` ), but you'll need
15
15
to learn about
16
- [ the ` relative ` prop] ( https://reactrouter.com/en/main /components/link#relative )
16
+ [ the ` relative ` prop] ( https://reactrouter.com/6.29.0 /components/link#relative )
17
17
on the ` Link ` component.
18
18
19
19
On the notes route, We should also link to the ` /users/kody/notes/some-note-id `
20
20
route.
21
21
22
22
The ` Link ` component in Remix is a wrapper around the ` Link ` component from
23
23
react router, so you can learn all about it in
24
- [ the react router ` Link ` docs] ( https://reactrouter.com/en/main /components/link ) .
24
+ [ the react router ` Link ` docs] ( https://reactrouter.com/6.29.0 /components/link ) .
25
25
26
26
As a bit of extra credit, do your best to leverage relative routes where you can
27
27
rather than hard-coding the full path of the route. This will make it easier to
28
28
move files around relative to each other in the future.
29
29
30
30
Also, look into the
31
- [ ` NavLink ` ] ( https://reactrouter.com/en/main /components/nav-link ) component so
31
+ [ ` NavLink ` ] ( https://reactrouter.com/6.29.0 /components/nav-link ) component so
32
32
you can highlight the link to the ` some-note-id ` route when that child route is
33
33
active. You can use the ` bg-accent ` class name when the link is active.
34
34
@@ -40,5 +40,5 @@ active. You can use the `bg-accent` class name when the link is active.
40
40
41
41
- [ 📜 Remix ` Link ` docs] ( https://remix.run/docs/en/main/components/link )
42
42
- [ 📜 Remix ` NavLink ` docs] ( https://remix.run/docs/en/main/components/nav-link )
43
- - [ 📜 React Router ` Link ` docs] ( https://reactrouter.com/en/main /components/link )
44
- - [ 📜 React Router ` NavLink ` docs] ( https://reactrouter.com/en/main /components/nav-link )
43
+ - [ 📜 React Router ` Link ` docs] ( https://reactrouter.com/6.29.0 /components/link )
44
+ - [ 📜 React Router ` NavLink ` docs] ( https://reactrouter.com/6.29.0 /components/nav-link )
0 commit comments