React RSK-Router

Declarative stateful react component router

import React from 'react';
import {route} from 'rsk-router';
 
class SomeReactComponent extends React.Component {
    constructor(props) {
        super(props);
        // Router requires some default states (only strings are allowed). 
        this.state = {
            someState: 'defaultValue',
            id: 'DfeEr1a3',
            zoom: '10%',
            path: '/path/to/some/file/or/folder'
        }
    }
    render() {
        // Some presentation code here 
    }
}
 
SomeReactComponent.stateRoutes = ['someState', 'id']; // States that will be bind to url`s route in said order 
SomeReactComponent.stateQuery = ['zoom', 'path']; // States that woll be bind to url`s query params 
 
export default route(SomeReactComponent);

On initial load code above will redirect you to your.domain/#/defaultValue/DfeEr1a3?zoom=10%&path=/path/to/some/file/or/folder (Only hash history is supported by now). And from now you can change url and it will effect corresponding component`s state and vice versa, mutating state of bind component will cause the appropriate change of url route or query.