This library is a state-only router that is designed specifically for use with Redux. It is built on top of Helpful Human's router-kit library.
npm install --save @helpfulhuman/redux-router
Create Your Router
createRouter() method is a factory for creating a new
ReduxRouter instance that you can use to add your middleware. It should be noted that the
ReduxRouter class extends the
Router class provided by
Note: You'll likely want to designate a file to your route configuration.
;// create a router instancevar router = ;// add middleware that will be applied to all routesrouter;// add middleware that applies to a partial route name and redirects// the user if the "token" value isn't set in their redux storerouter;// add a handler that dispatches an action to reduxrouter;// add a handler that dispatches actions based on route parametersrouter;// export the router to add it to your store;
||Your Redux store's
||Your Redux store's
||The parsed URI tokens for the route when a
||A parsed version of the query string for the route. An example would be
||The state of your Redux store when the route is first invoked.|
||The URI or
Rather than invoking route changes on the router directly, this library does its best to plug in to the way that Redux handles state changes: via action creators. There are 3 different action creators available for pushing, replacing and popping state.
replaceState()support an object as an optional second argument. This is to be used with aliases, which will be explained in more detail later on.
;// push a new route onto the stackstore;// redirect to a new route by replacing the current route on the stackstore;// go back to the previous route by popping the stackstore;
Aliases allow you to work with a semantic route name as an abstraction over the actual route's URI. By not littering URIs throughout your code, you can reduce the risk of forming bad URIs or reduce the hastle often associating with having to refactor URIs.
Note: You can use tokens in the path that you're aliasing.
// add a named alias for routing to a specific taskrouter;// route to the aliased URI -> /tasks/1000;
Connecting Your Router to redux
Once you've set up your routes, you can generate middleware for your Redux store with the
.connectStore() method. This method can optionally take a custom history instance (if empty, one will be created for you) and returns the middleware for Redux.
;;;// this is optionalvar history = ;var store =;