Usage with React Router

Deviation can be used with history and react-router the same way with Redux and connected-react-router. Below is the implementation of RouterService that will provide you the functionalities ofconnected-react-router.

Prerequisite

Before implementing RouterService, you need to install history and react-router-dom packages:

npm install --save history react-router-dom

To use the HTML5 History API, you need to declare the RouterService and history inside it:

import { createBrowserHistory } from 'history'
import { Store } from 'deviation'

export class RouterService extends Store {
    history = createBrowserHistory()
}

Then in ReactDOM, provide Router with the history that you've created:

import { Router, Route } from 'react-router-dom'
import { Inject } from 'deviation'

export interface IAppRouter {
    serviceRouter: ServiceRouter
}

@Inject({
    routerService: RouterService
})
export class AppRouter extends React.Component<IAppRouter> {
    render() {
        return (
            <Router history={this.props.routerService.history}>
                <Route path="/" exact component={HomePage} />
                <Router path="/login" exact component={LoginPage} />
            </Router>
        )
    }
}

You also have to listen for changes from history in so that AppRouter will re-render whenever history changes:

import {
  Location,
  UnregisterCallback
} from 'history'

export interface IRouterServiceState {
    location: Location
}

export class RouterService extends Store<{}, IRouterServiceState> {
    state = {
        location: undefined as Location
    }
    
    history = createBrowserHistory()
    listener: UnregisterCallback
    
    storeDidMount() {
        this.history.listen(() => {
            this.setState({ location: history.location })
        })
    }
    
    storeWillUnmount() {
        this.listener()
    }
}

You can use the methods directly from history or re-export the API as you want:

export class RouterService extends Store {
    push(location: string, state?: any) {
        this.history.push(location, state)
    }
    
    goBack() {
        this.history.goBack()
    }
}

Now we can you RouterService to navigate anywhere in our app:

@Inject({
    routerService: RouterService
})
export class Navigator extends React.Component {
    get routerService() {
        return this.props.routerService
    }
    
    render() {
        return (
            <div>
                <button
                    onClick={() => this.routerService.goBack()}
                >
                    Back
                </button>
                <button
                    onClick={() => this.routerService.push('/')}
                >
                    Home
                </button>
            <div/>
        )
    }
}