node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »

tramway-router-react-strategy

Tramway Router React Strategy is a plugin for the Tramway Router allowing apps built with the framework to be served statically. It includes:

  1. A dynamic routing system that separates routes from routing logic and is adaptable
  2. Authentication policies that allow for multiple strategies to be used and interchanged without needing the logic throughout the code.
  3. A simple but flexible React Router configuration

Installation:

  1. npm install --save tramway-core-router
  2. npm install --save tramway-router-react-strategy

Documentation

Recommended Folder Structure

  • components
  • controllers
  • policies
  • routes
  • styles
  • public

Components

All your basic React components that would be instantiated using the Controllers.

Routes

Uses the same set up as a traditional Tramway Router.

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.

Here's an example usage among parts of a main runner file:

import ReactDOM from 'react-dom';
import {Router} from 'tramway-core-router';
import RouterStrategy, {components} from 'tramway-router-react-strategy';
let {ReactRouter} = components;
 
import routes from './routes/routes.js';
import './styles/index.css';
 
let InitializedRouter = new Router(routes, new RouterStrategy(ReactRouter));
let IR = InitializedRouter.initialize();
 
ReactDOM.render(
  IR,
  document.getElementById('root')
);

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.