react-director-router
A versatile React Router based on Director
Features
- Inject route props into your views (route parameters, query parameters).
- Inject custom props into your views.
- Auto wraps views with any chosen Higher Order Component.
- Route handler functions will be fired on route change and will receive route params, query params and injected props.
- Small footprint (7kb gzipped).
Advantages
Makes your components cleaner by:
- discouraging to rely on
componentDidMount
for async data loading or state management. - avoiding repetitive "glue code" by auto wrapping HOCs.
By using route handlers your view components can be more functional, more view related and carry less business logic.
Therefore view component tests would be simpler.
Demo
yarn start-example
Usage
Install
yarn add react-director-router
App.js
const routes = path:'/' viewClass: HomeView { console; } path:'/book/:status/:id' viewClass: BookWithStatus { console } path:'/not-found' viewClass: NotFoundView const notFoundPath = '/not-found' const customProps = foo: 'bar' count: 9000 userRoles: 'basic-user' const HOCs = const middlewares = { console; } { return <div className="App"> <Router routes=routes notFoundPath=notFoundPath injectProps=customProps middlewares=middlewares viewHOCs=HOCs /> </div> }
Middlewares
Middlewares are functions that can intercept every route change and are a great opportunity to restrict a route or redirect the navigation flow.
By returning false on any middleware function, the middleware execution sequence will be interrupted, the view will not render and the route handler will not run. You can then redirect the navigation flow acording to the desired business logic.
Another common use for a middleware is logging navigation activity.
Example
A role restriction middleware:
{ if routerequiredRoles && injectedPropsuserRoles console; const isAllowed = injectedPropsuserRoles === routerequiredRoles if !isAllowed return isAllowed }
Roadmap
- Hash navigation
- Async routing