Routing with wildcard paths is impossible

I’ve been using this router for a week and finally ran into my first major issue that’s so far been impossible to work around. The code in master would seemingly allow a workaround, but the code deployed to NPM does not.

As a bit of back story, I am using redux-first-router as a top-level router for my app, and everything but the first level is handled by other child apps with their own routers. I am using wildcards in my route configuration like this:

const routesMap = {
  ROUTE_APP_A: {
    path: '/appA(.*)',
    ...,
  },
  ROUTE_APP_B: {
    path: '/appB(.*)',
    ...,
  }
}

That configuration works fine for most cases except for when I dispatch an action which includes paths that to take the place of the wildcard. This is an example of the action I’m dispatching:

dispatch({
  type: 'ROUTE_APP_A',
  payload: { 0: '/subRoute' }
});

The router will run through this code in pure-utils/actionToPath.js with each item in the payload:

var transformSegment = function transformSegment(segment, route, key) {
  if (typeof segment === 'string') {
    if (segment.indexOf('/') > -1) {
      return segment.split('/');
    }

    if (route.capitalizedWords === true) {
      return segment.replace(/ /g, '-').toLowerCase();
    }

    if (typeof route.toPath === 'function') {
      return route.toPath(segment, key);
    }

    return segment;
  } else if (typeof segment === 'number') {
    return segment;
  }
};

It hits the first check segment.indexOf('/') > -1, and splits the string to an array of ['', 'subRoute'].

Eventually, that param gets to path-to-regexp which throws the following error:

TypeError: Expected "0" to not repeat, but received `["","subRoute"]`

The error is swallowed by redux-first-router here and then it routes to the not-found page.

The code that is currently in master could provide a workaround since route.toPath is called, but that’s still not a clean solution.

For reference, I’m using 0.0.16-next which is the current “latest” tag on NPM.

[stezu]

Thanks @faceyspacey, that worked! Now my routesMap looks like this:

const routesMap = {
  ROUTE_APP_A: {
    path: '/appA/:subRoute*',
    ...,
  },
  ROUTE_APP_B: {
    path: '/appB/:subRoute*',
    ...,
  }
};

And I dispatch actions like this:

dispatch({
  type: 'ROUTE_APP_A',
  payload: {
    subRoute: 'routeA/routeB/routeC'
  }
});

Just documenting in case someone else lands on this issue in the future.

[faceyspacey]

does this work (taking from tests from the upcoming version, which should still work here):

createTest('optionally match "multi segment params" as single param', {
  REPO1: {
    path: '/repo1/:user/:repo/blob/:branch/:filePath*'
  },
  REPO2: {
    path: '/repo2/:user/:repo/blob/:branch/:filePath*'
  }
}, [
  {
    type: 'REPO1',
    params: {
      user: 'faceyspacey',
      repo: 'rudy',
      branch: 'master'
    }
  },

:filePath can be a url to a file like on a github repo /foo/bar/bla – and its named