# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simpletut.gitbook.io/universal-react-redux-registration/create-new-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.