⚠️ This lesson is retired and might contain outdated information.

Use RedwoodJS Link and routes Object to Navigate

Ian Jones
InstructorIan Jones
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 2 years ago

RedwoodJS provides a Link component that we can use to navigate around our app. We can provide a to prop with the path that we want to navigate to.

RedwoodJS takes this a step further and provides a routes object from @redwoodjs/router. This object is aware of all the routes defined in web/Routes.js. This allows us to use the methods on this object rather than referencing the our routes with a string literal. We can then change the route path without having to change all of the references to that route all over our app.

Ian Jones: [0:00] We're going to generate an AboutPage. You can use g as a substitution for generate. When you leave off the path, Redwood will use the name of the component for the path. If we go over to our browser and then go to About, you can see we have an AboutPage.

[0:24] Back in our code, we want to add a header. I have a nav, and then an unordered list, and then an li. This is where we will use Redwood's Link component. We'll import this from @redwoodjs/router. Link takes a to, so /about. Let me get this text of About. Now we have this link. When we press it, it goes to our AboutPage.

[1:18] Redwood also gives us this routes object. This routes object is aware of all of the routes in our application. Instead of calling this string of 'About', we can call routes.about(). The advantage of this is that you can change the path of your AboutPage inside of your Routes, and will demonstrate that here, abc.

[1:55] Now you don't have to go anywhere else to change the AboutPage route, Redwood will just know. When we click, it goes to about-abc.

egghead
egghead

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today