> For the complete documentation index, see [llms.txt](https://react-epic.gitbook.io/deviation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react-epic.gitbook.io/deviation/integration/usage-with-react-router.md).

# 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 of`connected-react-router`.

## Prerequisite

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

```bash
npm install --save history react-router-dom
```

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

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
@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/>
        )
    }
}
```