Custom payload data disappears when using the browsers back-button

[marcusstahlnacke]

I have an application where i add custom data to the payload-object for certain routes.
It works excellent, however when i use the back-button i Chrome the data disappears. Before i klick on the back-button the data is there when i inspect in redux dev tools.

What is the reason for this?

[hedgepigdaniel]

Rudy handles this use case in a more consistent way:

• non URL-serialisable parts of routing actions (anything except params/query/hash) is removed as soon as the action is dispatched, before the action gets to the reducers
• other data can be kept in action.state (analogous to the state in the browser pushState API). This data is preserved if the back/next buttons are used, and does not appear in the URL.

[marcusstahlnacke]

The problem is that if i manually push the state using window.history.pushState or through Rudy push-method there will be 2 entries in the browsers history-object with the same url.
Or maybe i should use history.replaceState(customdata, null, window.location.href) instead, passing my custom data?

Or am i misunderstanding something?

[hedgepigdaniel]

Basically you should never use the history API directly - the intention is that RFR/Rudy wraps it.

You can use a redirect/replace action in both RFR and Rudy to push a route that replaces the previous route instead of pushing a new one. This is analogous to history.replaceState.

[marcusstahlnacke]

I got it to work when using the replace-method.
However i don't know how to solve it when using a <NavLink to={{route
Perhaps i have to add an onClick event to the NavLink and there add the state?

[hedgepigdaniel]

import { redirect } from 'redux-first-router';
<NavLink to={redirect({ type: 'HOME'})} />