loading...
Cover image for a first look at redwoodJS: part 2 - routes

a first look at redwoodJS: part 2 - routes

ajcwebdev profile image anthonyCampolo Updated on ・6 min read

We basically wrote the tutorial the way that we wanted the code to work and then we made the tutorial work by writing the code. As opposed to Readme Driven Development which I've written about this is tutorial driven development.

Tom Preston-Werner - Full Stack Radio 138

In part 1 we installed and created our first RedwoodJS application. We used:

  • yarn create redwood-app to generate the initial app
  • redwood generate page to create:
    • A HomePage folder containing a HomePage file containing a HomePage component
    • An AboutPage folder containing an AboutPage file containing an AboutPage component.

Quick tip: If at any point you're having trouble remembering commands just enter:

yarn rw --help
Enter fullscreen mode Exit fullscreen mode

You'll get a quick reminder of all the commands.

01-redwood-help

We were able to navigate between the different pages in our browser by entering /about for the about page or a slash (/) for the home page. Depending on your experience with React this may have been surprising to you.

If you've worked on routing in React before you know that to achieve this there needs to be an entirely different package imported containing the router and then your routes need to be wrapped in a <BrowserRouter> or <Router> component to give the router access to your pages. Well guess what.....

2.1 Routes.js

02-web-src-routes

In our src folder we have a file called Routes.js. When we used the CLI to generate HomePage and AboutPage we also created these routes.

  • All Page components from 'src/pages` are auto-imported
  • Nested directories are supported, and should be uppercase
  • Each subdirectory will be prepended onto the component name

Examples:

src/pages/HomePage/HomePage.js -> HomePage
src/pages/Admin/BooksPage/BooksPage.js -> AdminBooksPage

2.2 index.js

The other file in our src folder is index.js which is our root component that ReactDOM renders to the screen.

03-web-src-index

In React all components are composable which encourages the creation of reusable UI components that present data that changes over time. Traditionally, web application UIs were built using templates or HTML directives.

But in React you always have a root component that contains other components and those components may contain other components. If that's a little confusing just give it some time and it'll start to click as this series goes on.

The important take away is:

  1. Your routes and thus all the website's pages are contained within the <RedwoodProvider> tags (we'll talk about these more once we get to state management).
  2. The provider itself is contained within the <FatalErrorBoundary> component that is taking in <FatalErrorPage> as a prop which defaults your website to an error page if all else fails.

2.3 Link

When it comes to routing, matching URLs to Pages is only half the equation. The other half is generating links to your pages. Lets add a link to our page so we can navigate between our home page and about page by clicking on the page. We'll need to add 3 things to our HomePage file:

  1. Import Link and routes from @redwoodjs/router
  2. <Link to={}>About</Link>
  3. Pass into the Link component routes.about()

04-HomePage-link-to-about-page

You use a Link to generate a link to one of your routes. The routes object can access URL generators for any of your routes.

We call the functions on the routes object named route functions. They are named after whatever you specify in the name prop of the Route.

Return to your browser to see the changes to your home page.

05-home-page-with-about-link

We now have a link we can click to navigate to our about page from our home page. Click the link and you will be brought to your about page.

06-about-page

We also want to be able to navigate back to our home page once we are on our about page. We'll do the same three steps from earlier but with a different prop:

  1. Import Link and routes from @redwoodjs/router
  2. <Link to={}>About</Link>
  3. Pass into the Link component routes.home()

07-AboutPage-component

Everything is exactly the same except we pass in routes.home() instead of routes.about() because we want to navigate to our home page this time. Take a look at your about page.

08-about-page-with-return-home-link

There is now a link that will take you back to the home page when clicked. If we open up our editor and look at our working tree we can see the changes we added.

09-HomePage-working-tree

You can only see this if you're working with git and regularly committing and pushing your code which is highly recommended.

2.4 redwood generate layout

You've probably been on a website before. Usually there's some kind of navigation bar at the top and footer at the bottom that stays consistent as you travel around the website.

Redwood's folder structure is designed to make this really easy.

10-layouts

Remember what I said before about everything being a component containing other components? That's the middle part. Pages contain components. Your layout will contain all of your pages.

We can generate a file for our layout with yarn redwood generate layout or yarn rw g layout. This will work a lot like the generate page commands we've done earlier.


yarn rw g layout blog

The only difference is it will create a folder inside ./web/src/layouts this time instead of ./web/src/pages because we are generating a layout and not a page.

11-generating-BlogLayout

That makes sense. Take a look at your layouts folder and you'll see a file called BlogLayout.js and another called BlogLayout.test.js for testing.

12-BlogLayout-folder

2.5 BlogLayout

Lets look at our BlogLayout component

13-layout-BlogLayout

children is where the magic will happen. Any page content given to the layout will be rendered here.

14-BlogLayout-component

Back to HomePage and AboutPage, we add a wrapper and now they're back to focusing on the content they care about

15-HomePage-import-BlogLayout

We can remove the import for Link and routes from HomePage since those are in the Layout instead:

16-AboutPage-import-BlogLayout

Notice that the import statement uses src/layouts/BlogLayout and not ../src/layouts/BlogLayout or ./src/layouts/BlogLayout.

  • This is a convenience feature so you don't need to worry about the nesting of your folders.
  • src is an alias to the src path in the current workspace. If you're working in web then src points to web/src and in api it points to api/src.

If we look at our home pages now it should look and behave the same way as before except we have turned our title in the <h1> tag into a home page link.

17-home-page-with-BlogLayout

Our about page is the same except we have removed the link to return home since we can now click the title.

18-about-page-with-BlogLayout

In the next part we'll start working with a database and learn to create, retrieve, update, and destroy blog posts.

Posted on by:

Discussion

pic
Editor guide