20

In v4 you would do a history.push('/whatever', { data }) Then the component tied to that route could read the data object by referencing the history.location.state

Now with v6 that's changed to navigate('whatever')

How do you pass data like before?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
user1663658
  • 203
  • 1
  • 2
  • 5

1 Answers1

45

It's similar to how it's done in v4, two arguments, the second being an object with a state property.

navigate(
  'thepath',
  {
    state: {
      //...values
    }
  }
})

From the migration guide: Use navigate instead of history

If you need to replace the current location instead of push a new one onto the history stack, use navigate(to, { replace: true }). If you need state, use navigate(to, { state }). You can think of the first arg to navigate as your and the other arg as the replace and state props.

To access the route state in the consuming component use the useLocation React hook:

const { state } = useLocation();
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • And how would you access it in the new navigated to component? – user1663658 Oct 25 '21 at 20:37
  • 1
    @user1663658 Route state will still be on the `location` object as far as I know, `const { state } = useLocation()`. – Drew Reese Oct 25 '21 at 20:41
  • 3
    Thats what I would have thought, but no go. navigate({ pathname: 'create', state: { duplicateLifecycle: duplicateLifecycle, }, }); let location = useLocation(); location.state is null :/ – user1663658 Oct 25 '21 at 20:45
  • 2
    @user1663658 Sorry, my initial response was incorrect, that was the v5 syntax. In v6 it would be `navigate('/create', { state: { duplicateLifecycle } })`, the target path is the first argument, a "config" object with state key is the second argument. – Drew Reese Oct 25 '21 at 20:50
  • Yeo that did it. Honestly never seen the state: { obj } syntax before – user1663658 Oct 25 '21 at 20:59
  • @user1663658 Ah, yeah, that is just object shorthand, useful when the object property you store uses the same name as the variable holding the value. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#property_definitions – Drew Reese Oct 25 '21 at 21:03
  • Hi@DrewReese! How would you handle it if there was no data in the route state? I've encountered an issue where I get the error "Right side of assignment cannot be destructured". Here is the code: const { toast } = useLocation(); const { autohide, toastVisible, error } = toast; I use these three toast elements inside of a component on the same page – cameronErasmus Nov 03 '22 at 19:28
  • @cameronErasmus `toast` isn't a property on the `location` object. You probably need something more like `const { state } = useLocation()` then `const { toast } = state || {}`, *then* `const { autohide, toastVisible, error } = toast`. Does this make sense? – Drew Reese Nov 03 '22 at 19:31
  • Perfect sense @DrewReese! Logical or is a perfect addition. Thanks for the tip! – cameronErasmus Nov 03 '22 at 19:36