History Types & Location

NOTE: If you don't need hash or memory routing, then you can skip this section.

While it's not required to know the history API itself to use React Location, it's a good idea to understand how it works. Under the hood, React Location requires and uses a history instance to manage the browser history.

• If you don't create a history instance, a default createBrowserHistory instance is created for you automatically when you call new ReactLocation()

• If you need a special history instance type, You can use the history package to create your own history instance:

• createBrowserHistory: The default history type.

• createHashHistory: A history type that uses a hash to track history.

• createMemoryHistory: A history type that keeps the history in memory.

Each of these APIs behaves slightly differently and documentation for them can be found in the history package.

Once you have a history instance, you can pass it to the ReactLocation constructor, which can then be passed to the Router component:

1 const history = createHashHistory()
2 const location = new ReactLocation({ history })
3 
4 function App() {
5   return (
6     <Router
7       location={location}
8       routes={
9         [
10           // ...
11         ]
12       }
13     />
14   )
15 }

Browser Routing

The createBrowserHistory is the default history type. It uses the browser's history API to manage the browser history.

Hash Routing

Hash routing can be helpful if your server doesn't support rewrites to index.html for HTTP requests (among other environments that don't have a server).

1 import { createHashHistory, ReactLocation } from '@tanstack/react-location'
2 
3 // Create a hash history
4 const hashHistory = createHashHistory()
5 
6 // Set up a ReactLocation instance with the hash history
7 const location = new ReactLocation({
8   history: hashHistory,
9 })

Memory Routing

Memory routing is useful in environments that are not a browser, like node.js or electron.

1 import { createMemoryHistory, ReactLocation } from '@tanstack/react-location'
2 
3 // Create a memory history
4 const memoryHistory = createMemoryHistory({
5   initialEntries: ['/'] // Pass your initial url
6 })
7 
8 // Set up a ReactLocation instance with the memory history
9 const location = new ReactLocation({
10   history: memoryHistory,
11 })