Replace an existing page

OverviewCopy Anchor Link

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

Replace an existing pageCopy Anchor Link

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.

   Copy Text

    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:

   Copy Text

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

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

   Copy Text

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

Now the `productDetail` page is replaced with the `CustomPage` component.