route-builder.js

import React, {PureComponent} from 'react'
import {HashRouter as Router, Match, Link} from 'react-router'

const DEBUG = props => <pre><code>{JSON.stringify(props, null, 4)}</code></pre>
const config = [
  {
    Component: DEBUG,
    category: 'language',
    subCategory: 'language-step1'
  },
  {
    Component: DEBUG,
    category: 'language',
    subCategory: 'language-step2'
  },
  {
    Component: DEBUG,
    category: 'job'
  },
  {
    Component: DEBUG,
    category: 'xp'
  }
]

/*
<HashRouter>
  <div>
    <Match pattern='/client' component={WrappedStepper} />
    <Match exactly pattern='/' component={() => <IdentityRedirect to={`${IDENTITY_APP_URL}/#/login`} profil='client' />} />
    <Match extactly pattern='/token/:token' component={props => <IdentitySuccess {...props} successUrlBuilder={(props) => `/client/token/${props.params.token}/need`} />} />

 */
// const _buildNextRoute = config =>
const _buildRoute = conf => `/${conf.category}${conf.subCategory ? '/' + conf.subCategory : ''}`
const _buildNextRoute = conf => data => {
  if (conf.subCategory) {
    if (conf.subCategory === 'language-step1') return _buildRoute({category: 'language', subCategory: 'language-step2'})
    else if (conf.subCategory === 'language-step2') return _buildRoute({category: 'job'})
  } else if (conf.category === 'job') return _buildRoute({category: 'xp'})
  else return _buildRoute({category: 'language', subCategory: 'language-step1'})
   // switch (conf.category)
}
const _buildComponent = config => {
  const {Component: ConfComponent, ...otherConfig} = config
  class RouteConfWrapper extends PureComponent {
    render () {
      return <div>
        <ConfComponent {...otherConfig} {...this.props} />
        <Link to={config.nextRoute()}>{({onClick}) => <button onClick={onClick}>Next</button>}</Link>
      </div>
    }
  }
  return RouteConfWrapper
}
class Wizard extends PureComponent {
  render () {
    return <Router>
      <div>
        {config.map((conf, i) => <Match key={i} pattern={_buildRoute(conf)} component={_buildComponent({...conf, nextRoute: _buildNextRoute(conf)})} />)}
      </div>
    </Router>
  }
}

export default Wizard