Home

Awesome

Routex

Circle CI

Simple router for Redux universal applications. Can be used with React too.

Installation

npm install routex

Requirements

Routex needs some abstraction over browser history, we recommend to use rackt/history^1.0.0

Usage

Creating routex (without react)

import { createRoutex, actions } from 'routex';
import { compose, createStore, combineReducers } from 'redux';
import { createHistory } from 'history';

const routes = [
    {
        path: '/',
        children: [
            {
                path: 'about',
                children: [/* ... */]
            }
        ],
        attrs: {
            custom: true // optional custom attributes to assign to route
        }
    }/* ... */
];

// this will return object with high order store and reducer
const routex = createRoutex(routes, createHistory(), () => console.log('Transition finished') );

const newCreateStore = compose(routex.store, createStore);
const routexReducer = routex.reducer;
const reducers = combineReducers({ ...routexReducer /* your reducers */ });

const store = newCreateStore(reducers);

store.dispatch(actions.transitionTo('/about')); // transitions to about

store.generateLink('about'); // generates link object (see api)

Creating routex using in React app (React >= 0.14)

import { createRoutex } from 'routex';
import { compose, createStore, combineReducers } from 'redux';
import React, { Component } from 'react';
import { View, Link } from 'routex/lib/react';
import { createHistory } from 'history';

class App extends Component {
    render() {
        //this props children contains nested route
        // so everywhere when you can render nested routes you need to do this
        return (
            <div>
                <Link route={'about'} params={{}} />
                {this.props.children}
            </div>
        );
    }
}

const routes = [
    {
        path: '/',
        component: App, // you need components in all routes because <View /> needs to render them
        attrs: {}, // default attrs
        children: [
            {
                path: 'about',
                attrs: { test: 1 },
                component: () => Promise.resolve(About),
                children: () => Promise.resolve([{ path: '/', component: Child }])
            }
        ]
    }/* ... */
];

// this will return object with high order store and reducer
const routex = createRoutex(routes, createHistory(), () => console.log('Transition finished') );

const newCreateStore = compose(routex.store, createStore);
const routexReducer = routex.reducer;
const reducers = combineReducers({ ...routexReducer /* your reducers */ });

const store = newCreateStore(reducers);

React.render(
    <Provider store={store}>
        <View />
    </Provider>
    , document.getElementById('App')
);

Use router as standalone (without redux / react)

import { Router } from 'routex';
import { createHistory } from 'history';

const router = new Router([/* routes */], createHistory() /*, optional onTransition hook */);

router.listen(); // start listening to pop state events (immediately will start transition for current location)

// if you want to transition to another location you have to run this
// if you won't then router will lose track of current location and will pretend
// that location didn't change
router.run('/where-you-want-to-go', { /* query params object */});

API

React components

<View> Component

Use this component whenever you want to render routes. This component needs store to be accessible in context. <View /> components can be nested, so you can use them in your own components (in case of nested routes)

<View /> // will render current route component (if route component renders <View /> too, it will render component of nested route

<Link> Component

Use this component whenever you want an <a> element to go to route. This component need store to be accessible in context. Internally this component is dispatching action transitionTo()