Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<Redirect /> can't convert additional parameters. #4919

Closed
zackyang000 opened this issue Apr 6, 2017 · 11 comments
Closed

<Redirect /> can't convert additional parameters. #4919

zackyang000 opened this issue Apr 6, 2017 · 11 comments

Comments

@zackyang000
Copy link

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
Copy link
Contributor

pshrmn commented Apr 6, 2017

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}`} />
)} />

@pshrmn pshrmn closed this as completed Apr 6, 2017
@alexkreidler
Copy link

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

@pshrmn
Copy link
Contributor

pshrmn commented Jun 5, 2017

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
Copy link
Contributor

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

@timdorr
Copy link
Member

timdorr commented Aug 10, 2017

@jacobrask See #5368

@gouegd
Copy link

gouegd commented Aug 15, 2017

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
Copy link

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
Copy link

I used @pshrmn suggestion in #4919 (comment) 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
Copy link

@mjackson or @ryanflorence What do you think of #4919 (comment)? 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
Copy link

@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:

screen shot 2018-04-05 at 2 04 21 pm

@timdorr
Copy link
Member

timdorr commented Apr 5, 2018

That's in 4.3.0-rc.2

@lock lock bot locked as resolved and limited conversation to collaborators Jun 4, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants