Create new pages

Create new pages

Create a file in the following directory ‘Frontend/src/client/pages’

To help maintain consistence please use the same naming conventions as the other files. (camel casing)

Build your new page. For example:

import React, { Component } from 'react';

class NewPage extends React.Component {
    render(){
        return(
            <div>

            </div>
        )
    }
}

export default {
    component: NewPage
}

Configure your Routes

We are using 'React Router 4' and specifically 'react-router-config' to define our Routes. This allows us to create a Routes array and greater control over handling data fetching during server-side rendering.

For more information on 'react-router-config', please see:

https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

Open ‘Frontend/src/client/routes/index.js’ and import your new Page Component

import NewPage from './path/to/newPage;

Add a new route to the routes array

{
    ...some route
},
{
        path: '/newpage',
        ...Auth, << -- Layout Component
        routes: [
            {
                ...NewPage <<-- Our New Page Component
            }
        ]
},
{
    ...some route
}

Please note that we are using the spread object '...NewPage'.

This is because when we export our 'NewPage' class, we are export an object. The reason we export an object is because it allows us to define both the Component key/value pairs and a custom 'loadData' function (optional).

export default {
    component: NewPage
}

Whilst optional, the 'loadData' function can be use during the server-side rendering process to inform the server what data needs to fetched before throwing down the initial HTML.

For example

export default {
    component: connect(mapStateToProps, { get_currentUser })(Account),
    loadData: ({ dispatch }) => dispatch(get_currentUser('noToken'))
};

We are using the code above in our 'account.js' component. This allows us to dispatch and complete an async call during the server-side rendering process.