Pages

Oreact pages are React Components associated with a route.

In a project root /pages directory assigned to create new pages.

Create My First Page

Each page needs to have a two files in it's directory : config.js and Component.js.

For example

Let's say you wants to create an about page for your business. Create /pages/about directory and place config.js and Component.js as shown below.

config.js

/pages/about/config.js

import loadable from '@oreact/core/loadable';
export default {
    // Page layout and theme configuration
    settings: {        
        layout: {
            type: 'myLayout',
            config: {
                style: 'fullwidth',
                scroll: 'content',
                navbar: {
                    display: true
                },
                toolbar: {
                    display: true
                },
                footer: {
                    display: true
                }
            }
        },
        customScrollbars: false,        
        theme: {
            main: 'myTheme',
            navbar: 'myTheme',
            toolbar: 'myTheme',
            footer: 'myTheme'
        }
    },
    // Declare routes
    routes: [
        {
            address: ['/about'],
            exact: true,
            // Link the page component with route
            component: loadable(() => import('./Component'), {ssr: true}),
            routes: {
                /* Add nested child routes */
            }           
        }
    ]
};

Component.js

/pages/about/Component.js

    import React from 'react';    
    export default () => {            
        return <div>My About page</div>;                  
    }              

Linking the page with route

/pages/index.js holds the list of routes for all the different pages created inside the /pages directory.

For example

As we have created an about page in above example. Now we can add it into the page registry as shown below:

index.js

/pages/index.js

import aboutConfig from 'pages/about/config'

export default [
    ...
    aboutConfig
    ...
];

Note: Don't name the pages directory anything else. The name cannot be changed and is the only directory used to serve dynamic pages.