Redirect rules in routeMap

[stefan-toubia]

I recently needed to add some redirect to some of my routes and was surprised that there wasn't an existing solution. Here's what I ended up with, works great for me and is pretty straightforward.

const routesMap = {
  HOME: "/",
  SOMEWHERE: {
    path: "/somewhere",
    redirect: (getState) => {
      const { hasPermission } = selectConfig(getState());
      if (!hasPermission) {
        return "NOT_FOUND";
      }
    },
  },
}

const { reducer, middleware, enhancer, initialDispatch } = connectRoutes(
  routesMap,
  {
    initialDispatch: false,
    onBeforeChange: (dispatch, getState, { action }) => {
      const redirectRoute = routesMap[action.type]?.redirect?.(getState);
      if (redirectRoute) {
        dispatch(redirect({ type: redirectRoute, payload: action.payload }));
      }
    },
  }
);

This adds a redirect function prop to routesMap, which will be used in onBeforeChange to redirect if redirect returns a value. Note that in my case I needed to use initialDispatch because I need to fetch some user data before I can execute the redirect logic.

This is working pretty well for my current use case but it could probably be more robust. redirect could also accept the payload or action as a second arg. Maybe it would also make sense for redirect to return an action instead of the action type string for better control over redirecting the payload or metadata.

If this approach makes sense it would be nice to have it integrated into connectRoutes. I noticed this was an active help topic for wanted PRs, I can open a PR if it will be helpful.