Replace an existing page

Overview

This article describes how to replace an existing page in the app.

Replace an existing page

To replace an existing page, you need to create a new React component and add it to the app. To do this, follow these steps:

1. Open the <package-id>/pages folder or create a new one if it does not exist.

2. Create a new React component in the pages folder. You can use pages/CustomPage.js as a reference.

    const CustomPage = {
    title: 'Custom Page',
    blocks: [
        {
        name: 'namespace/custom-block',// custom block name
        attributes: {
            title: 'Title from app',
        },
        },
    ],
    };
    export default CustomPage;

   You need to register the block in the blocks folder. For more information, see Add a new block.

3. Register the page in the pages/index.js file. For example, to replace the productDetail page, you need to add the following code:

   import CustomPage from './customPage';
    const pages = {
         'productDetail': CustomPage,
    }
    export { pages }

4. Import the page in the <package-id>/index.js file.

   import {pages} from './pages/index';

   Now the productDetail page is replaced with the CustomPage component.