Generate a Redwood Project

Generate a Page Using the Redwood CLI

Use RedwoodJS Link and routes Object to Navigate

Extract a RedwoodJS Layout Component

Introduction to RedwoodJS: full-stack framework for JAMstack

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.

Course

Introduction to RedwoodJS: full-stack framework for JAMstack

Use RedwoodJS Link and routes Object to Navigate

Share this video with your friends