React-router: match path with optional params (v4)

[AgentChris]

Hey guys:
Can i match all routes with a path like this:

/work/:workId(/:stepName)(/:goodId/:stepName)

I expect to catch all the routes with the following paths:

/work/work_id_12/step1
/work/work_id_12/good_id_11/step1

[AgentChris]

the optional params doesn't seem to work

[pshrmn]

v4 uses path-to-regexp. You can check its documentation on how to format params. This is different than in previous versions of React Router.

Personally instead of trying to overload the path, I would write this something like:

<Route path='/work/:workId' component={WorkRoutes} />

const WorkRoutes = ({ match }) => (
  <Switch>
    <Route exact path={`${match.url}`} component={Work} />
    <Route path={`${match.url}/:goodId/:stepName`} component={Step} />
    <Route path={`${match.url}/:stepName`} component={Step} />
  </Switch>
)

You can test out route configuration using this route tester

[AgentChris]

thanks man this is really usefull :)