Added Redirect with parameters

[dlindenkreuz]

This pull request adds back a feature from v3 where the to URL pathnames of <Redirect> could contain parameters.

Currently, parameters in from are already matched by <Switch> and then passed into <Redirect> as computedMatch prop just like <Route> children. However, <Redirect> does not do anything with that information yet.

I implemented a new generatePath(pattern, params) function that creates a new pathname using path-to-regexp's compile function. This guarantees that patterns are processed in the same way as they are parsed in matchPath. This function is used to put the params from computedMatch into the respective slots of the to prop, which may from now include named parameters as well.

All compile functions are cached by pattern using the same mechanism as matchPath.

Most importantly, the matching logic remains completely untouched and as-is. All of this is meant to be minimally invasive.

Tests, docs and batteries included. It might make sense to make generatePath available as a public API helper method and document it like matchPath.

Examples (without <Switch> for brevity)

// /users/123 → /users/profile/123
<Redirect from="/users/:id" to="/users/profile/:id" />

// /users/123 → /users/profile/123?additional=args
// Location objects work as well, `to.pathname` gets populated with parameters
<Redirect from="/users/:id" to={{ pathname: "/users/profile/:id", search: "?additional=args" }} />

// /users/editors/123 → /users/profile/123
// parameters in `from` that are not included in `to` are ignored
<Redirect from="/users/:group/:id" to="/users/profile/:id" />

// /users/editors/123 → /users/home
// `to` can be completely "static"
<Redirect from="/users/:group/:id" to="/users/home" />

// /foo/bar → does not match, no redirect (duh)
<Redirect from="/users/:group/:id" to="/users/home" />

// /users/123 → ERROR
// Parameter :foo is missing in `from`, path-to-regexp throws an error
<Redirect from="/users/:id" to="/users/:id/:foo" />

// /users/profiles → /profiles
// Needless to say, all redirects without parameters work just like usual.
<Redirect from="/users/profiles" to="/profiles" />

[dlindenkreuz]

Obviously, this pattern does not contain any parameters. For an additional performance shortcut, we could assume that all strings that do not contain *, (, ) or : are eligible to pass through before creating and caching a compile function.

[MichalZalecki]

Is there anything which keeps this PR from being merged?

[amaschas]

I was actually just about to file a request for this feature. Seems like it's been waiting a while for a merge.

[jochenberger]

Just out of curiosity, do you see any solutions for e.g. /users/123 → /users?id=123 or should that better be done in a programmatic way?

[mjackson]

Thank you @dlindenkreuz for implementing this! I've been wanting to tackle this for a while now. This will definitely make it into our next release 😅

[dlindenkreuz]

@mjackson Sweeeet 🎉

@jochenberger path-to-regexp, the underlying library that is responsible for matching paths and extracting URL parameters, does not handle query strings at all.

More details:

• URL parameters behind a variable pillarjs/path-to-regexp#47 (comment)
• query parameters and RegExp's involving path parameter pillarjs/path-to-regexp#91
• https://github.com/pillarjs/path-to-regexp/blob/master/Readme.md

  Please note: The RegExp returned by path-to-regexp is intended for ordered data (e.g. pathnames, hostnames). It does not handle arbitrary data (e.g. query strings, URL fragments, JSON, etc).

You might want to wrap the redirect in a <Route> like this (not tested, might not work exactly as-is):

const dynamicRedirect = ({ match }) =>
  <Redirect to={{pathname: "/users", search: `?id=${match.params.userId}`}} />
// ...
<Route path="/users/:userId" render={dynamicRedirect} />

[lionkeng]

Will there be a release anytime soon that includes this change? Thx.

[zakness]

This implementation does not account for paths with param modifiers. For example:

<Redirect from="/about/:rest+" to="/:rest+" />
// expected: /about/foo/bar → /foo/bar
// actual: /about/foo/bar → /foo%2Fbar

I did a quick fix in my own project by just appending .replace('%2F', '/') to the output of generatePath, but this needs some more thinking + additional tests. I may have time to contribute something soon, just wanted to raise it here.

[barrystaes]

Will there be a release anytime soon that includes this change? Thx.

Its not in the currently latest release of react-router-dom 4.2.2
(..there really should be better way to look up in which version a commit got released!)

[timdorr]

@barrystaes There is. Or look up the tags.

[barrystaes]

Thanks @timdorr!

Not sure on how to find it (by commit) in Github however.. like git describe --exact-match <commit-id> or git tag --contains <commit>..

[timdorr]

[liuyenwei]

👋 bumping this since I would also love this change. are there any plans for a release?

[timdorr]

Yes, it will be released.

[imevro]

@timdorr do you have ETA?

[timdorr]

Nope.

[Xuhao]

Looking forward to the release.

[klairetan]

Also looking forward to this release!