add custom property to props.location

Question

Using React and Javacript, is it acceptable to add a custom property to props.location when passing it via props.history.push? e.g.

this.props.history.push({
  pathname: '/someurl',
  state: {smallObject: myObject},
  customProperty : myBiggerObject
});

And then at the component that loads at /someurl, I can load: let myBigObj = this.props.location.customProperty;

This appears to work, and I'm asking if it's "okay" to do? I am concerned that I may be overlooking something within Javascript or React that I am unaware of.

I would pass customProperty within the state property if the object that I was passing was sufficiently small. It isn't: it exceeds the 640k limit mentioned here, and I get an error indicating that data can not be cloned if I pass myBiggerObject in the state property.

score 1 · Answer 1 · answered May 27 '19 at 02:30

Here is the link for API documentation

history.push(path, [state])

// Push a new entry onto the history stack.
history.push('/home');

// Push a new entry onto the history stack with a query string
// and some state. Location state does not appear in the URL.
history.push('/home?the=query', { some: 'state' });

// If you prefer, use a single location-like object to specify both
// the URL and state. This is equivalent to the example above.
history.push({
  pathname: '/home',
  search: '?the=query',
  state: { some: 'state' }
});

// Go back to the previous history entry. The following
// two lines are synonymous.
history.go(-1);
history.goBack();

Note: Location state is only supported in createBrowserHistory and createMemoryHistory.

add custom property to props.location

1 Answers1