Customizing your home page
When the React Store application homepage is launched, the React Router considers the relative path and loads the respective page component configured for that path.
Location | Description |
---|---|
src\constants\routes.ts | Store path - paths used in the store. |
ROUTE_CONFIG in src\configs\routes.ts | Path-to-component mappings. ROUTE_CONFIG must be mapped separately for the B2C and B2B stores. |
Home.tsx in src\components\pages\home | Page component for the home page. The Home.tsx component contains the entire home page and its sub-components. |
src\components\layouts\standard-page | Home page layout component The homepage uses the StandardPageLayout to display the page sub-components. The StandardPageLayout component consists of a banner and two sections, vertically aligned. |
src\App.tsx | Header and footer |
- For the Reference Store applications, the home page for both the B2C and B2B Reference Store applications maps to the same page component.
- It is not mandatory to use a layout component. The sub-components can be included directly in the Home component. However, by creating a layout component you can reuse the same layout structure on other pages.
- The header and footer are statically included in the React app and are not part of the routing. As such they are present on every page. The header and footer components are src/components/header and src/components/footer respectively.