Rethinking best routing practices
This is a collection of utilities for routes in a React/Redux app that treats the address bar as an input and URLs as a serialization format.
npm install redux-antirouter history
Derive the route from the app state; dispatch an action when the address bar is changed by the user.
createRouterMiddleware({
history: [defaults to BrowserHistory],
onChange: ({ path, query }) => action,
selectRoute: (state) => ({ path, query }),
})Real links that get their URLs from the actions they dispatch
<LinkProvider selectRoute={(state) => ({ path, query })}
rootReducer={(state, action) => state}>
<Link action={action}
className="link-class"
activeClassName="active"
style={{ color: "blue" }}
activeStyle={{ fontWeight: "bold" }}
isActive={(currentRoute, nextRoute) =>
currentRoute.path[0] === nextRoute.path[0]} />
</LinkProvider>