ScandiPWA routes are React components that are rendered on the client to display particular pages, differing from Magento controllers by the way the rendering occurs. They may also follow the standard architecture of ScandiPWA and its set of rules and internal structure. Make sure you’re updated:

What is the architecture of ScandiPWA?

ScandiPWA already defines a set of routes by default. These are defined in the Router component, which is responsible for determining which route to render. The possible routes are defined in the SWITCH_ITEMS_TYPE field (Where exactly is this field declared?) and are passed onto the react-router library (What is react-router?).

Learning how to work with Routes is important to add a new page/Route in your ScandiPWA application.

How does a route differ from a Magento controller?

In a conventional Magento theme, all of the pages are generated on the server. Instead of rendering the pages on the server and fetching them every time, ScandiPWA only fetches the data from the server (using GraphQL), and performs the rendering on the client-side, using React. The page is never actually reloaded - once the app's JavaScript code has been loaded, the front-end magic happens without any help from a server. This is called a Single-Page Application.

How does the ScandiPWA Router component know what component to render?

When there is a change in the URL path, ScandiPWA needs to know what component to render, for that it uses the:

• Router component handles all possible rendering. There are default Routes in the SWITCH_ITEMS_TYPE, that you can use to extend and add a new Route.

  <aside> ℹ️ The Router container has an init property that is used when the component is rendered that calls a list dispatcher functions, allowing some behavior to be added to every page of ScandiPWA(How to work with Redux?).

  </aside>

• Route component is used to render the component associated with the URL.

• URLRewrite component is used when there is no match with the URL, it sends a GraphQL query to check if there is some type associated with the URL. If the type returned is mapped to another component, it renders it, else it shows the NoMatch component or default page.

How to create a new Route component and implement it?

You can create a new route by using ScandiPWA CLI to generate the necessary component structure for you. Check it out:

create route

This command allows you to create a new ScandiPWA route.

Use the following syntax:

create route [--container] [--redux] <name>

Options:

• -container/c creates a container file for the route
• -redux/r connects the route to the Redux store with the connect HOC
• name is the name of the route to be created

Example:

scandipwa create route MyLandingPage
# Output:
NOTE!

     The following files have been created:
     src/route/MyLandingPage/MyLandingPage.component.js
     src/route/MyLandingPage/MyLandingPage.style.scss
     src/route/MyLandingPage/index.js

<aside> ℹ️ If you’re interested in the ScandiPWA CLI, please check out our guide about it! How to use the ScandiPWA CLI?

</aside>

There is a tutorial available on how to implement a new Route and add the appropriate response status code.

Tutorials

Tutorial: How to add a new route using UrlRewrite

Tutorial: Add an additional page/route to the app

Tutorial: How to avoid custom controllers being redirected to ScandiPWA?

savePaymentMethodAndPlaceOrder