router.js

import React from 'react';

const routeProperty = Symbol();

function extractParams(pattern, url) {
  pattern = pattern.replace('*', '');
  if (!pattern || !url) {
    return {};
  }

  const patternParts = pattern.split('/');
  const patternParams = [];
  patternParts.forEach((item, index) => {
    if (item[0] !== ':') return;
    patternParams.push({
      name: item.substring(1),
      index,
    });
  });
  const urlParts = url.split('/');
  const result = {};

  patternParams.forEach(item => {
    result[item.name] = urlParts[item.index];
  });
  return result;
}

export default class Router {

  constructor() {
    this[routeProperty] = [];
  }

  add(pattern, fn) {
    var regEx = pattern.replace(/\/:[^/*]+/g, '/.+');
    regEx = regEx.replace('*', '.*');
    this[routeProperty].push({
      pattern,
      regEx: new RegExp(regEx),
      fn,
    });
  }

  resolve(state) {
    const routes = this[routeProperty].filter(route => route.regEx.test(state.path));
    const results = routes.map(route => {
      const newState = Object.assign({}, state || {}, {
        params: extractParams(route.pattern, state.path),
      });
      const response = route.fn(newState);
      response.state = newState;
      return response;
    });

    let component = null;
    const actions = [];

    for (var i = 0; i < results.length; i++) {
      const comp = results[i].component;
      const action = results[i].action;

      if (comp) {
        if (component) {
          component = React.cloneElement(comp, {
            childRoute: component,
          });
        } else {
          component = React.cloneElement(comp);
        }
      }

      if (action) {
        if (action instanceof Promise) {
          actions.push(action);
        } else {
          action();
        }
      }
    }

    return {
      component,
      actions: Promise.all(actions),
    };
  }
}

routes.js

import React from 'react';
import Router from 'base/router';
import Demo from 'components/demo';

const router = new Router();

router.add('/user/:id', (state) => ({
  component: <Demo name={'user:' + state.params.id} />,
}));

router.add('/user*', (state) => ({
  component: <Demo name='user' />,
}));

export default router;

usage.js

function navigate(url) {
  if (!url) return;
  let actions = null;
  let urlComponents = getUrl(url);
  let navigationState = {
    path: urlComponents.path,
    query: urlComponents.query,
    context: this.context,
    store: global.store,
    cached: global.history.state && global.history.state.cached,
    area: this.props.area,
  };

  const result = this.props.router.resolve(navigationState);
  // result.component: React component
  // result.actions: array of promises to be run to fill data
}