Location Data from Props
What is location data
Sometimes it can be helpful to know exactly what your app’s browser URL is at any given stage. Because Gatsby uses @reach/router for client-side routing, the location prop is passed to any page component and represents where the app is currently, where you’d like it to go, and other helpful information. The location object is never mutated but reach@router makes it helpful to determine when navigation happens. Here is a sample props.location:
Note that you have to parse the search field (the query string) into individual keys and values yourself.
HashHistory
Using hash in JavaScript is one way to update the browser URL and the DOM without having the browser do a full HTML page reload. HashHistory in @reach/router is used to track browser history with JavaScript when using hashrouter instead of browserrouter which uses the newer HTML5 history API.
Use cases
Through client-side routing in Gatsby you can provide a location object instead of strings, which are helpful in a number of situations:
- Providing state to linked components
- Client-only routes
- Fetching data
- Animation transitions
Example of providing state to a link component
Then from the receiving component you can conditionally render markup based on the location state.