CODEWITHSUNDEEP
javascriptreactjsreact-router
Omri Aharon
Omri Aharon

Reputation: 17064

React Router Without Changing URL

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 saw that there is such a thing called createMemoryHistory:

createMemoryHistory([options])

createMemoryHistory creates an in-memory history object that does not interact with the browser URL. This is useful for when you need to customize the history object used for server-side rendering, for automated testing, or for when you do not want to manipulate the browser URL, such as when your application is embedded in an iframe.

But beyond this paragraph there aren't any usage examples and I can't find a usage for this anywhere, i.e: how to use Link component to navigate without a pathname, by which parameter do I route if not pathname, etc.

Is this right for my needs, or do I have to implement a router on my own?

Upvotes: 25

Views: 37529

Answers (2)

Alasdair McLeay
Alasdair McLeay

Reputation: 2652

React Router 4+ has a MemoryRouter

import { MemoryRouter } from 'react-router-dom'

<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://reactrouter.com/en/6.23.1/router-components/memory-router

Upvotes: 24

mdziekon
mdziekon

Reputation: 3627

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

Upvotes: 22

Related Questions