33<EpicVideo url = " https://www.epicweb.dev/workshops/full-stack-foundations/routing/creating-navigation-links-for-seamless-user-experience" />
44
55👨💼 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.
77
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 ` / ` .
99
1010On the <LinkToApp to = " /users/kody" /> page, we want to link to the user's notes
1111route.
1212
1313On the <LinkToApp to = " /users/kody/notes" /> route, we should link back to the
1414` /users/kody ` page. 💰 Tip, you can use a relative path (` .. ` ), but you'll need
1515to 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 )
1717on the ` Link ` component.
1818
1919On the notes route, We should also link to the ` /users/kody/notes/some-note-id `
2020route.
2121
2222The ` Link ` component in Remix is a wrapper around the ` Link ` component from
2323react 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 ) .
2525
2626As a bit of extra credit, do your best to leverage relative routes where you can
2727rather than hard-coding the full path of the route. This will make it easier to
2828move files around relative to each other in the future.
2929
3030Also, 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
3232you can highlight the link to the ` some-note-id ` route when that child route is
3333active. You can use the ` bg-accent ` class name when the link is active.
3434
@@ -40,5 +40,5 @@ active. You can use the `bg-accent` class name when the link is active.
4040
4141- [ 📜 Remix ` Link ` docs] ( https://remix.run/docs/en/main/components/link )
4242- [ 📜 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