react-router-last-location
- Provides access to the last location in
react
+react-router (v4.x, v5.x)
applications. - ❤️ Using
hooks
? If yes,useLastLocation
. - 💉 Using
HOC
? - If yes,withLastLocation
. - Handle redirects.
- Support
- Useful for handling internal routing.
- Easily prevent leaving your app by users.
Demo
Note: Last location != Previous browser history state
This library only returns the location that has been active before the recent location change in the current window lifetime.
This means, it is not equal to the "location that happened before navigating to this history state", or in other words "location to which you'll be redirected upon clicking browser back button".
Example 1
- Visit
/
: last location =null
, previous browser history state =null
- Visit
/a
: last location =/
, previous browser history state =/
- Visit
/b
: last location =/a
, previous browser history state =/a
- Reload (url will stay at
/b
): last location =null
, previous browser history state =/a
Example 2
- Visit
/
: last location =null
- Visit
/a
: last location =/
- Visit
/b
: last location =/a
- Go back: last location =
/b
, previous browser history state =/
Example 3
- Visit
/
: last location =null
- Visit
/a
: last location =/
- Visit
/b
: last location =/a
- Visit
/c
: last location =/b
- Go back to
/a
(by selecting that state explicitly in "Go back" browser dropdown that is visible upon clicking it with right mouse button): last location =/c
, previous browser history state =/
How to use?
# Please remember that you should have installed react, prop-types and react-router-dom packages # npm install react prop-types react-router-dom --save npm install react-router-last-location --save
If you still use v1.x.x
and would like to use hook useLastLocation
, please upgrade to v2.x.x
version (don't worry, no breaking changes).
npm install react-router-last-location@^2.0.0# or npm install react-router-last-location@latest
<LastLocationProvider />
inside <Router />
.
Declare index.js
import React from 'react';import render from 'react-dom';import BrowserRouter as Router Route Link from 'react-router-dom';import LastLocationProvider from 'react-router-last-location';import Home from './pages/Home';import About from './pages/About';import Contact from './pages/Contact';import Logger from './components/Logger'; const App = <Router> <LastLocationProvider> <div> <ul> <li><Link ="/">Home</Link></li> <li><Link ="/about">About</Link></li> <li><Link ="/contact">Contact</Link></li> </ul> <hr /> <Route ="/" = /> <Route ="/about" = /> <Route ="/contact" = /> <hr /> <Logger /> </div> </LastLocationProvider> </Router>; ;
useLastLocation
to get lastLocation
.
Use hook ./components/Logger
, see example
import React from 'react';import useLastLocation from 'react-router-last-location'; const Logger = const lastLocation = ; return <div> <h2>Logger!</h2> <pre> JSON </pre> </div> ;; ;
withLastLocation
to get lastLocation
prop.
Use HOC ./components/Logger
, see example
import React from 'react';import withLastLocation from 'react-router-last-location'; const Logger = lastLocation <div> <h2>Logger!</h2> <pre> JSON </pre> </div>; Logger;
RedirectWithoutLastLocation
to don't store redirects as last location
Use import React from 'react';import RedirectWithoutLastLocation from 'react-router-last-location'; const MyPage = <RedirectWithoutLastLocation ="/" />; ;
You can still use regular <Redirect />
component from react-router
but then you need to pass manually the state: { preventLastLocation: true }
, like below:
import React from 'react';import Redirect from 'react-router-dom'; const MyPage = <Redirect = />; ;
LastLocationProvider
Props
watchOnlyPathname
, type: boolean
, default: false
Stores the last route only when pathname
has changed.