This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

Routing

When building a Custom View, you might encounter a use case when you need to navigate between different areas. For example, you might have a list of items and you want to navigate to a detail view when the user clicks on an item.

The routing within a Custom View is decoupled from the host application because the Custom View is loaded in a sandboxed iframe to improve security. The base URL for a Custom View is of the following format: https://<merchant-center-domain>/custom-views/<custom-view-id>/projects/<project-key>.

To implement routing, use the react-router-dom library and adjust the routes.tsx you can find in the src folder of the starter templates. The following example adds two routes: page-A and page-B to the routes.tsx file for navigation:

import { Route, Switch, useRouteMatch } from 'react-router-dom';
import PageAComponent from './components/page-a-view';
import PageBComponent from './components/page-b-view';

const ApplicationRoutes = () => {
  const match = useRouteMatch();

  return (
    <Switch>
      <Route path={`${match.path}/page-A`}>
        <PageAComponent />
      </Route>
      <Route path={`${match.path}/page-B`}>
        <PageBComponent />
      </Route>
      <Route>
        <WelcomeComponent />
      </Route>
    </Switch>
  );
};

Use the Link component to navigate between pages.

import Link from '@commercetools-uikit/link';

const WelcomeComponent = () => {
  const match = useRouteMatch();

  return (
    <div>
      <h1>Welcome to the Custom View</h1>

      <Link to={`${match.url}/page-A`}>Go to Page A</Link>
      <Link to={`${match.url}/page-B`}>Go to Page B</Link>
    </div>
  );
};