Package Exports

react-router-last-location

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-router-last-location) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-router-last-location

Provides access to the last location in react + react-router (v4.x) applications.
❤️ Using hooks? If yes, useLastLocation.
💉 Using HOC? - If yes, withLastLocation.
Support
Useful for handling internal routing.
Easily prevent leaving your app by users.

Demo

TypeScript (`v2.0.0-beta.1` - `now`)

Are you using TypeScript and would like to have proper autocompletion and type checking? Install at least v2.0.0-beta.1.

JavaScript (`v1.0.0 - v2.0.0-beta.0`)

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'd like to use hook useLastLocation, please install at least 2.0.0-beta.0

npm install react-router-last-location@2.0.0-beta.0
# or
npm install react-router-last-location@latest

Declare `<LastLocationProvider />` inside `<Router />`.

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 to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />

        <hr />

        <Logger />
      </div>
    </LastLocationProvider>
  </Router>
);

render(<App />, document.getElementById('root'));

Use hook `useLastLocation` to get `lastLocation`.

./components/Logger, see example

import React from 'react';
import { useLastLocation } from 'react-router-last-location';

const Logger = () => {
  const lastLocation = useLastLocation();

  return (
    <div>
      <h2>Logger!</h2>
      <pre>
        {JSON.stringify(lastLocation)}
      </pre>
    </div>
  );
};

export default LoggerHooks;

Use HOC `withLastLocation` to get `lastLocation` prop.

./components/Logger, see example

import React from 'react';
import { withLastLocation } from 'react-router-last-location';

const Logger = ({ lastLocation }) => (
  <div>
    <h2>Logger!</h2>
    <pre>
      {JSON.stringify(lastLocation)}
    </pre>
  </div>
);

export default withLastLocation(Logger);

Props

watchOnlyPathname, type: boolean, default: false

Stores the last route only when pathname has changed.