A react-router-dispatcher action for defining react-router redirects that support server-side streaming.
Read the react-router-dispatcher documentation if you haven't already done so.
There is an working example here that incorporates redirects and metadata
npm install --save react-router-dispatcher-redirectyarn add react-router-dispatcher-redirectimport redirectAction, { redirectRoute, REDIRECT, STATUS_CODE } from 'react-router-dispatcher-redirect';
// REDIRECT is the action name, used to configure react-router-dispatcher// routes.js
import { redirectRoute, withRedirect } from 'react-router-dispatcher-redirect';
import { Root, Home, MyAccount } from './components';
const routes = [
{ component: Root,
routes: [
{ path: '/',
exact: true,
component: Home
},
{ path: '/myaccount',
exact: true,
component: withRedirect({
to: '/login',
shouldRedirect: (routeProps, props) => true, // conditional redirect
mapParamsToProps: p => p
})(MyAccount)
},
// redirect routes
redirectRoute({ from: '/hello', to: '/world' }),
redirectRoute({ from: '/temporary', to: '/login', statusCode: 302 })
]
}
]
export default routes;Configuring the redirect action using react-router-dispatcher
import { createRouteDispatchers } from 'react-router-dispatcher';
import { STATUS_CODE, REDIRECT } from 'react-router-dispatcher-redirect';
import routes from './routes';
const {
UniversalRouteDispatcher,
ClientRouteDispatcher,
dispatchClientActions,
dispatchServerActions
} = createRouteDispatchers(routes, [[STATUS_CODE, REDIRECT]]);
// Server dispatch
dispatchServerActions(req.url, params).then(({ httpResponse: { statusCode, redirect } }) => {
if (redirect) {
// redirect the response - expressjs syntax
return res.redirect(statusCode, redirect);
}
res.status(statusCode);
// render the application
});redirectAction(props: Object)
mapParamsToProps: (params: Object, routerCtx: Object) => Object
- An optional function that maps action parameters to component props
statusCode: number
- A HTTP status code to be used by the redirect
shouldRedirect: boolean | (routeProps: Object, componentProps: Object) => boolean
- An optional boolean or function that returns true if the request should be redirected
push: boolean
- An optional boolean value used for client-side redirects, true to push or false to replace the url
redirectRoute(props: Object)
define a react-router-config redirect route
from: string
- The source route path
to: string | object
- The target of the redirect
statusCode: number
- Optionally, the statusCode to use for server-side HTTP redirects
push: boolean
- Optionally, for client-side redirects. True to push or false to replace the history url location
strict: boolean
- Optionally, true to have the
frompath use a strict match
exact: boolean
- Optionally, true to have the
frompath use an exact match
withRedirect(props: Object)
Used to enable conditional redirects, for example protecting authenticated routes
to: string | object
- The target of the redirect
mapParamsToProps: (params: Object, routerCtx: Object) => Object
- An optional function that maps action parameters to component props
shouldRedirect: boolean | (props: Object) => boolean
- An optional boolean or function that returns true if the requets should be redirected
statusCode: number
- Optionally, the statusCode to use for server-side HTTP redirects
push: boolean
- Optionally, for client-side redirects. True to push or false to replace the history url location
strict: boolean
- Optionally, true to have the
frompath use a strict match
exact: boolean
- Optionally, true to have the
frompath use an exact match
For questions or issues, please open an issue, and you're welcome to submit a PR for bug fixes and feature requests.
Before submitting a PR, ensure you run npm test to verify that your coe adheres to the configured lint rules and passes all tests. Be sure to include unit tests for any code changes or additions.
MIT