Skip to main content

routing

Routing approach​

IMHO:​

Where is no need in 90% of web apps to use reach api routing libraries.

SOLUTION IN SHORT:​

Bind onRouteChangeCallback on flux action.

SOLUTION WITH EXAMPLES:​

For client-server solution router must expose two functions with (plus-minus) next interfaces

  1. gotoRoute(url) for client side

  2. router(routePathes, initialRouteDispatch, onRouteChangeCallback) for server and client side
    where

    • routePathes is a map: string => string and can be defined somewhere
    export const K_DEFAULT_ROUTE = '/';
    export const K_MAP_ROUTE = '/map/:example/:zoom?';
    export const K_NO_ROUTE = '*';

    • initialRouteDispath: boolean - if true router route to current path at initialization (useful for client but not required in order of gotoRoute).

    • onRouteChangeCallback - router onRouteChange callback with any parameters it can expose, for me this parameters are

    callback({routeName, routePath, routeParams, routeFullPath}) { ...
    // this gives for real route '/map/hello/world' next parameters
    // routeName = 'K_MAP_ROUTE'
    // routePath = '/map/:example/:zoom?'
    // routeParams = {example: 'hello', zoom: 'world'}
    // routeFullPath = '/map/hello/world'

Then you can bind router callback to flux action, and create simple flux store for router data.

flux routeChange action calls other actions (sync and async) in array, look at redux MULTI_ACTION middleware.
This middleware and array of sync-async actions calls allows me to wait all route actions to complete on server-side.

Next steps are simple, as like flux work just subscribe on router store changes, and use simple switch-case or create your simple <Router handler={} approach.

The rest is to write Link react component.