Routing in LWR

LWR provides a great deal of routing sophistication. Here we start with a basic routing example and an overview of the properties you can use for a route.

Basic Routing

Let’s add a page to our site and do some basic (and fast!) routing.

  1. Now that you’ve got your StaticSite project, make a copy of the about.md file. Keep the new file in the content directory and name the file explore.md.
  2. Edit the explore.md file. You can change the first line from # About LWR to # Explore LWR. Save the file.
  3. Open the main_layout.njk file. On a new line, add <li><a href="/explore">Explore</a> under the about line. Save the file. Code snippet showing the Explore href addition
  4. Finally, open the lwr.config.json file. Copy the entire block of code for about, including the curly brackets, and paste it below the about block. Change about to explore throughout, and don’t forget to add the comma after the closing bracket in the about block. Save the file. Code snippet showing the Explore block added
  5. If you're still in the StaticSite directory from when you first made your site, just type npm run start in the terminal to see your changes. Your updated StaticSite project should run at http://localhost:3000/, with a new Explore LWR page and a working Explore button. Screenshot of updated site with Explore LWR page

What just happened is that you:

  • created a Markdown page (explore.md) and gave it new heading text ("Explore LWR")
  • updated the site navigation in the Nunjucks layout (main_layout.njk) file to include a new Explore button
  • updated the JSON routing configuration file (lwr.config.json) to let LWR know how to route to the new page
    • you gave an id for the page (Explore)
    • you provided the path for the page (/explore)
    • you provided a contentTemplate for the page (explore.md)
    • you told LWR which layoutTemplate you wanted to use for the page (main_layout.njk, the same as for your other pages in this example, though that’s not required)

A Deeper Dive into LWR Routing

Each server-side route includes some of these properties:

  • id: The unique identifier for the route.
  • path: The unique URI path from which the route is served.
  • layoutTemplate: The path to a static template that renders the page layout.
  • either:
    • contentTemplate: The path to a static template that renders the page content.
    • rootComponent: The top-level Lightning web component that LWR bootstraps into the HTML output for the route. Each route must have either a rootComponent or a contentTemplate, but not both. (If you do use a rootComponent, LWR applies a default contentTemplate to render it.)
  • properties: A JSON object that can be passed to the templates as context.
  • routeHandler: A path to a route handler. Route handlers are an advanced topic, but for now know that you can customize the page response using a route handler. A route handler is a function that is configured for a route.
  • cache: The cache settings for the routing, including:

Here’s an example of the routes in a more complex lwr.config.json file that includes a couple more properties:

Next Steps

Now that we've examined how LWR handles templates and routing, let's work with LWR's compile-time data in more complex scenarios.