# Routes

ScandiPWA uses [`react-router`](https://reactrouter.com/web/guides/quick-start) and `react-router-dom` to handle routing. The Router itself is a ScandiPWA component, defined in `component/Router/Router.component.js`.

The components for the routes themselves are defined in the `route` directory. The structure of each route is the same as any other [component](https://docs.scandipwa.com/structure/building-blocks-summary/components), but instead of being used throughout the application, they are used only in the router.

## Special Cases

ScandiPWA allows you to create custom URL rewrites that don't match the standard routes. This is implemented in `route/UrlRewrites`.

If neither the standard routes nor the URL rewrites resolve to anything, the user is shown an error message stating that no page has been found. This is implemented in `route/NoMatchHandler`.

## Example - Standard Route

The `CartPage` is defined in `route/CartPage`.  It is added to the router:

```javascript
// component/Router/Router.component.js


// imported lazily for better performance
export const CartPage = lazy(() => import(/* webpackMode: "lazy", webpackChunkName: "cart" */ 'Route/CartPage'));
// [...]

/** @namespace Component/Router/Component */
export class Router extends PureComponent {
    // all standard routes are defined here, including the cart page
    [SWITCH_ITEMS_TYPE] = [
        {
            component: <Route
              path={ withStoreRegex('/cart') }
              exact
              render={ (props) => <CartPage { ...props } /> }
            />,
            // position is the "priority" of this route.
            // routes with lower position will be rendered first,
            // and if several routes match the same URL, the first one is shown
            position: 50
        },
        // [...]
    ];
    // [...]
}

export default Router;
```

Now, whenever the user visits `/cart`, the `CartPage` will be shown.

## Example - URL Rewrite

The ProductPage is defined in `route/ProductPage`. It is rendered when `UrlRewrites` resolves an URL to a `TYPE_PRODUCT` page:

```jsx
// route/UrlRewrites/UrlRewrites.component.js


    renderContent() {
        const { props, type, updateNoMatch } = this.props;

        switch (type) {
        case TYPE_PRODUCT:
            return <ProductPage { ...props } />;
        case TYPE_CMS_PAGE:
            return <CmsPage { ...props } />;
        case TYPE_CATEGORY:
            return <CategoryPage { ...props } />;
        case TYPE_NOTFOUND:
            updateNoMatch({ noMatch: true });
            return <NoMatch { ...props } />;
        default:
            return this.renderDefaultPage();
        }
    }
```