react-router-historian
v0.0.2
Published
Keeps an accessible record of past locations in react-router (v3.x) apps
Downloads
18
Maintainers
Readme
#React Router Historian
Keeps a record of past locations in react-router (v4.x) apps. This is useful when you for example need a contextual back button:
##Requirements
This plugin is written for React Router 3.X
##Installation
Yarn: $ yarn add react-router-historian
NPM: $ npm i reaction-router-historian -S
##Usage and Example
You first need to wrap your app with the HistorianProvider which listens to React Router changes:
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { Historian } from 'react-router-historian';
const App = () => (
<Router>
<Historian>
// ...
</Historian>
</Router>
);
render(<App />, document.getElementById('app'));
Next, you wrap the components that read and edit (see below) history with the withHistorian HOC:
import { React } from 'react';
import { withHistorian } from 'react-router-historian';
class MyComponent extends React.Component {
componentWillReceiveProps(props) {
props.updateCurrentLocation({ title: 'MyComponentTitle' });
}
}
export withHistorian(MyComponent);
class MyOtherComponent extends React.Component {
backFunc() {
// ...
}
render() {
const lastPage = this.props.getLastLocation();
return (
<div>
<button onClick={backFunc}>Back to {lastPage.title}</button>
</div>
);
}
}
export withHistorian(MyOtherComponent);
##Component functions
These functions are made available via props to the components wrapped with withHistorian
:
###getCurrentLocation():Object
###getLastLocation():Object
###updateCurrentLocation(location)
##Thanks
React Router Historian is heavily inspired by react-router-last-location by Dawid Karabin
NPM package exists thanks to react-build-lib by adrianmcli