A Recoil binding for React Router v6

Usage no npm install needed!

<script type="module">
  import lagunovskyRecoilReactRouter from 'https://cdn.skypack.dev/@lagunovsky/recoil-react-router';


Recoil React Router

A Recoil binding for React Router requires React 16.8, Recoil 4.0, React Router 6.0 or later


$ npm install --save @lagunovsky/recoil-react-router


  1. install and import @lagunovsky/recoil-react-router
  2. create history instance and bind it using bindHistory(history)
  3. use <RecoilReactRouter/> instead of <Router/>


To change the current location, you'll want to use one of the following:

  • history.push - Pushes a new location onto the history stack
  • history.replace - Replaces the current location with another
  • history.go - Changes the current index in the history stack by a given delta
  • history.back - Navigates one entry back in the history stack
  • history.forward - Navigates one entry forward in the history stack


bindHistory(history: History)

Bind a history instance with a recoil state

RecoilReactRouter(props: { children: React.ReactNode })

<RecoilReactRouter> is a component that synchronizes recoil, history and react-router

routerState: RecoilState<{ action: History.Action, location: History.Location }>

An atom that contains current history state


A hook that allows to use time travel


import { bindHistory, RecoilReactRouter, routerState, useTimeTraveling } from '@lagunovsky/recoil-react-router'
import { createBrowserHistory } from 'history'
import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Routes } from 'react-router'
import { RecoilRoot, useRecoilValue } from 'recoil'

const history = createBrowserHistory()

function Page() {
  const { location } = useRecoilValue(routerState)
  return (

function App() {
  useTimeTraveling() // if you want to use time travel

  return (
        <Route path={'*'} element={<Page/>}/>

ReactDOM.render(<RecoilRoot children={<App/>}/>, document.getElementById('app'))