React-router: <Redirect /> can't convert additional parameters.

[TossShinHwa]

Hi,

In react-router v3, we can use <Redirect /> like this:

  <Redirect from="profile/:userId" to="about/:userId" />

It will be covert correct:

/profile/123 -> /about/123

Unfortunately, it's not work in react-router v4. It will be get:

/profile/123 -> /about/:id  <---- params be output directly

Is there a new way to do this in v4?

version: react-router-dom 4.0.0

[pshrmn]

A <Redirect> doesn't do any pattern compiling. You have to give it the actual URI that you want to redirect to.

The approach that I would take would be to use a <Route> instead of a <Redirect> for the matching, and then use the parsed param to build the redirect URI.

<Route path="/profile/:userId" render={({ match }) => (
  <Redirect to={`/about/${match.params.userId}`} />
)} />

[alexkreidler]

@pshrmn
Is pattern-matching redirects a planned feature, or is it intentionally left out? Would you accept a pull request for it?

[pshrmn]

I'm not personally a fan of the idea because I don't like overloading the <Redirect> with functionality that only works inside of a <Switch>. I'm not even a fan of being able to use a <Redirect> directly in a <Switch>. I'm also not someone who makes decisions about this sort of thing, so I'm not the person to convince that it would be useful.

[jacobrask]

Couldn't to take a function argument returning a string/object?

[timdorr]

@jacobrask See #5368

[gouegd]

I'd also like to be able to pass a to function on the Redirect, so some querystring parameters can be preserved. Currently to access the location, one has to add an extra Router component (or withRouter wrapping) when it's not otherwise needed.

[Falieson]

Do I understand correctly that with the merging of #5368 we can go <Route path='/account/:id' to='/account/:id/summary' component={AccountSummary} /> and the component will render whether or not /summary is on the url?

[Sparragus]

I used @pshrmn suggestion in https://github.com/ReactTraining/react-router/issues/4919#issuecomment-292229262 and created a Redirect component of my own. Now, instead of using React Router's Redirect, I use this:

// Redirect.js
import React from 'react'
import {
  Redirect as ReactRouterRedirect,
  Route,
} from 'react-router-dom'

export default function Redirect (props) {
  const {
    from,
    to,
    ...rest
  } = props

  if (!from) {
    return <ReactRouterRedirect {...props} />
  }

  return (
    <Route
      path={from}
      render={({ match }) => {
        const paramKeys = Object.keys(match.params)

        const toWithReplacedParamsKeys = paramKeys.reduce((url, key) => (
          url.replace(`:${key}`, match.params[key])
        ), to)

        return <ReactRouterRedirect to={toWithReplacedParamsKeys} {...rest} />
      }}
    />
  )
}

Hope it helps.

[Sparragus]

@mjackson or @ryanflorence What do you think of https://github.com/ReactTraining/react-router/issues/4919#issuecomment-346709646? Is it worthy of a behavior that Redirect should do? If you like, I can try to implement it and open a PR with it.

[kylebebak]

@pshrmn

A doesn't do any pattern compiling. You have to give it the actual URI that you want to redirect to.

It's worth mentioning this runs contrary to the documentation:

[timdorr]

That's in 4.3.0-rc.2