2.0.0 • Published 7 years ago
react-router-pundit v2.0.0
react-router-pundit
React component that works with react-pundit and react-router-dom.
With inspiration from React Pundit.
Pre-requisites
You need react-pundit and react-router-dom (React Router V4).
Getting Started
Install it via npm:
npm install --save react-pundit react-router-pundit react-router-dom
PunditRoute
PunditRoute
will pass the original location to the Redirect via the location
state as a from. this.props.location.state.from
PunditRoute
can handle redirect paths as the return from the pundit check
as well as the default boolean return.
Example
import { PunditContainer } from 'react-pundit';
import { PunditRoute, PassPropsRoute } from 'react-router-pundit';
import { Route } from 'react-router-dom';
import ReceiptView from '../ReceiptView';
import TacoView from '../TacoView';
import BasicView from '../BasicView';
import policies from './policies.js';
import './App.css';
class App extends Component {
render() {
const user = { id: 1, role: 'basic', activated: true };
const receipt = { user: { id: 1 }, id: 45389, body: 'test', title: 'Receipt for 1/1/2017.' };
return (
<div className="App">
<PunditContainer policies={policies} user={userOne}>
<PunditRoute
path={`/receipt/${receipt.id}`}
exact
component={ReceiptView}
type="Receipt"
action="View"
model={receipt}
user={user}
redirectPath="/login"
componentProps={{ receipt }}
/>
<PassPropsRoute
path="/tocos"
exact
componentProps={{ magic: true }}
component={TacoView}
/>
<Route path="/basic" component={BasicView} />
</PunditContainer>
</div>
);
}
}
API reference
// Available components
import {
PunditRoute,
PassPropsRoute
} from 'react-router-pundit';
Work in progress
Examples
See examples folder.
Testing changes locally
You can test changes by importing the library directly from a folder:
- Do changes to the library
- On your test project:
npm install /path/to/your/react-router-pundit/ --save
- For easy development, you can
npm link react-router-pundit
on your application - And finally
npm run compile
the react-router-pundit to have the changes in your application
License
MIT