Recommended Folder Structure

Components

Routes

Router

The Router will be called in your main index or bundle file where you instantiate the ReactDOM. This is typically at the root of your project. Once you have a router, initializing it will set up the routes and assign them to the Router which can then be assigned to the DOM.

Note that this setup will require an index.html file to be present with an element that has the id "root" in order for this to work. This setup may vary based on whether you use gulp or webpack to handle the bundling.

The ReactRouter that's provided with this library creates a new BrowserRouter as per React-Router's V4 API and uses a switch between all the routes in the config and a separated 404 handling which can be done by using the included NotFoundController with one of the routes in the routing configuration. If you wish to override the ReactRouter with your own Router setup - a Switch is not ideal for parallax websites - make sure that the following parameters are given to the ReactRouter component you pass to the RouterStrategy:

Param

Type

Purpose

notFoundRoute

React.Component

The React Router strategy will identify the NotFoundRoute response for any unspecified url

routes

React.Component[]

The React Router strategy will convert the routes config to the React-Router V4 spec Routes and return them in an array to be nested as per the React API

Controllers

Controllers link to actions from the routing and act to direct the flow of the application.

Controllers with the React Router are a bit different than with the traditional routing in Tramway and traditional Tramway Controllers will not work here.

To create a controller, import the class and implement the render function and lifecycle methods for any api calls.

import {controllers} from 'tramway-router-react-strategy';

let {ReactController} = controllers;

To create a 404 Not Found Page, simply extend and implement the NotFoundController.

import {controllers} from 'tramway-router-react-strategy';

let {NotFoundController} = controllers;

Accessing route parameters is encapsulated using ReactController and its children.

Param

Type

Purpose

params

{}

Contains the parameters passed through the router. If you have a path with argument: name, expect params to have {"name": "NAME_FROM_URL"}

location

{}

Contains the pathname, search and state that was passed to the Router

history

{}

Contains all the actions to manipulate the browser history within the Router

Policies

The policies architecture is identical to that of any standard Tramway application. Note that any controller containing a policy will be wrapped in an AuthorizationDecorator by this library's version of the Security class and will asynchronously determine if the application should redirect to the policy's redirect path.