React Router Without Changing URL

Question

I need to have routing that works without changing the URL.

Before implementing this on my own, I tried to look for something by react router. I sa

Answer 1

React Router 4 has a MemoryRouter

import { MemoryRouter } from 'react-router'

<MemoryRouter>
  <App/>
</MemoryRouter>

A <Router> that keeps the history of your “URL” in memory (does not read or write to the address bar). Useful in tests and non-browser environments like React Native.

https://reacttraining.com/react-router/web/api/MemoryRouter

Answer 2

MemoryHistory is a "history provider", which you can supply to React Router like this:

const memoryHistory = createMemoryHistory(options);

// In your Router configuration
<Router history={memoryHistory} routes={routes} />

Beyond the initial configuration, everything else should work exactly the same as with regular browser history.

This article describes how to use different providers with React Router: Histories