The term "history" and "history
object" in this documentation refers to the history
package, which is one of only 2 major dependencies of React Router (besides React itself), and which provides several different implementations for managing session history in JavaScript in various environments.
The following terms are also used:
- "browser history" - A DOM-specific implementation, useful in web browsers that support the HTML5 history API
- "hash history" - A DOM-specific implementation for legacy web browsers
- "memory history" - An in-memory history implementation, useful in testing and non-DOM environments like React Native
history
objects typically have the following properties and methods:
length
- (number) The number of entries in the history stackaction
- (string) The current action (PUSH
,REPLACE
, orPOP
)location
- (object) The current location. May have the following properties:pathname
- (string) The path of the URLsearch
- (string) The URL query stringhash
- (string) The URL hash fragmentstate
- (object) location-specific state that was provided to e.g.push(path, state)
when this location was pushed onto the stack. Only available in browser and memory history.
push(path, [state])
- (function) Pushes a new entry onto the history stackreplace(path, [state])
- (function) Replaces the current entry on the history stackgo(n)
- (function) Moves the pointer in the history stack byn
entriesgoBack()
- (function) Equivalent togo(-1)
goForward()
- (function) Equivalent togo(1)
block(prompt)
- (function) Prevents navigation (see the history docs)
The history object is mutable. Therefore it is recommended to access the location
from the render props of <Route>
, not from history.location
. This ensures your assumptions about React are correct in lifecycle hooks. For example:
class Comp extends React.Component {
componentDidUpdate(prevProps) {
// will be true
const locationChanged =
this.props.location !== prevProps.location;
// INCORRECT, will *always* be false because history is mutable.
const locationChanged =
this.props.history.location !== prevProps.history.location;
}
}
<Route component={Comp} />;
Additional properties may also be present depending on the implementation you're using. Please refer to the history documentation for more details.