1.1.0 • Published 2 years ago

react-router-use-history v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

react-router-use-history

useHistory in react router v6

Install

  pnpm add react-router-use-history

Usage

Router created with createBrowserRouter and <RouterProvider /> (Data Browser Router)

React router >= v6.4.0

import { useHistory } from 'react-router-use-history'

function Page() {
  const history = useHistory()
  // ...
  history.push('/a')
}

Router created with <BrowserRouter /> (Legacy Browser Router)

React router >= v6.0.0

  1. Replace BrowserRouter :

    +import { BrowserRouter } from 'react-router-use-history'
    -import { BrowserRouter } from 'react-router-dom'
    
    function Root() {
      return (
        <BrowserRouter>
          {/* ... */}
        </BrowserRouter>
      )
    }
  2. Enjoy useHitory :

    import { useHistory } from 'react-router-use-history'
    
    function Page() {
      const history = useHistory()
      // ...
      history.push('/a')
    }

Advanced usage

useHistorySelector

history selector for deep selection value

import { useHistorySelector } from 'react-router-use-history'

function Page() {
  const pathname = useHistorySelector(h => h.location.pathname)
}

Custom history outside of react router

You can define your own history outside of the react router :

  pnpm add history
  1. Create independent history

    // history.ts
    import { createBrowserHistory } from 'history'
    
    export const history = createBrowserHistory()
    
    // or
    // import { createBrowserHistory } from '@remix-run/router'
    // export const history = createBrowserHistory({ v5Compat: true })
  2. Replace <BrowserRouter> and inject history instance

    import { BrowserRouter } from 'react-router-use-history'
    import { history } from './history'
    
    function Root() {
      return (
        <BrowserRouter history={history}>
          {/* ... */}
        </BrowserRouter>
      )
    }
  3. Then you can use history anywhere

    // anywhere.ts
    import { history } from './history'
    
    history.push('/page')

License

MIT