redux-model-router

A model for router based on @redux-model/web

installation

yarn add @redux-model/web-router

# or

npm install @redux-model/web-router

Register

Register Browser history

import { routerModel } from '@redux-model/web-router';

const reducers = {
   ...routerModel.registerBrowser(),
};

Register Hash history

import { routerModel } from '@redux-model/web-router';

const reducers = {
   ...routerModel.registerHash(),
};

Methods

push, replace, go, goBack, goForward

import { routerModel } from '@redux-model/web-router';

routerModel.push('/user');
routerModel.goBack();

Listeners

import { Model } from '@redux-model/web';
import { routerModel } from '@redux-model/web-router';

class TestModel extends Model<Data> {
    protected onInit() {
        super.onInit();

        routerModel.subscribe('/user/:id', ({ id }, location, action) => {
           console.log(id);
        });
        
        const token = routerModel.subscribe('/article/:id/category/:cate', ({ id, cate }, location, action) => {
            console.log(id);
            console.log(cate);
        });
    
        // In some case, you don't want to listen it any more.
        routerModel.unsubscribe(token);
    }
}

export const testModel = new TestModel();

Data

In Hooks

import { routerModel } from '@redux-model/web-router';

const App = () => {
  const { location, action } = routerModel.useData();

  return <div />;
};

In Component

import { routerModel } from '@redux-model/web-router';
import { connect } from 'react-redux';

type Props = ReturnType<typeof mapStateToProps>;

class App extends Component<Props> {
  render() {
    return <div />;
  }
}

const mapStateToProps = () => {
  return {
    location: routerModel.data.location,
    action: routerModel.data.action,
  };
};

export default connect(mapStateToProps)(App);