⛵ Navigate away

Intercept and manipulate location changes

Intercept location changes before React paints them on screen.

Use this hook to manipulate the navigation flow, replace the next location or edit its state in a render friendly manner, before re-rendering the whole component tree.

---

Compatible with both react-router v6 and v5 API

---

Setup

1pnpm add navigate-away

1npm i navigate-away

1yarn add navigate-away

Instructions are pretty simple, use the hook wherever you want!

Just be sure to always pass your app's router object to it (or history if working with react-router v5 API)

1import { useNavigateAway } from 'navigate-away'
2import { router } from 'src/store'
3
4const Component = () => {
5  useNavigateAway(({ nextLocation, action, navigate }) => {
6    // do something with the location
7    if (action === 'POP') {
8      const updatedLocation = {
9        ...nextLocation,
10        state: {
11          ...nextLocation.state,
12          someFlag: true
13        }
14      }
15
16      // then navigate
17      navigate(updatedLocation)
18    }
19  }, router) // use the `history` object if working with `react-router` v5 API
20
21  // ...
22}

There is also a component version of the hook.

It comes handy when dealing with libraries such as Formik and you need to pass Formik props to the hook:

1import { NavigateAway } from 'navigate-away'
2import { router } from 'src/store'
3
4const Component = () => {
5  // ...
6
7  return (
8    <Formik>
9      {(formikProps) => (
10        <NavigateAway
11          router={router}
12          callback={({ nextLocation, action, navigate }) => {
13            // use Formik props in the callback
14          }}
15        />
16      )}
17    </Formik>
18  )
19}

That's all, enjoy!

Used in production by Utilmond

---