React-Router 4, Redirect with dynamic path

Question

A user receives an email with invitation code like http://website.com/invitation/%s where %s is an invitation code.

Now I would like to redirect that URL in my app but keep the invitation code like:

<Redirect from="/invitation/:code" to="/auth/register/:code" />

So when the user clicks the link in email:

http://website.com/invitation/2abc433

he will be transferred to:

http://website.com/auth/register/2abc433

Unfortunately, with Redirect component like above, he is transferred to

http://website.com/auth/register/:code

Answer 1

You can use a stateless component for that :

<Route exact path="/invitation/:code" render={props => (
    <Redirect to={`/auth/register/${props.match.params.code}`/>
)}/>

<Redirect> doesn't support a way to pass parameters directly.

Demo : https://codesandbox.io/s/8kjq4r1m90

Answer 2

Make the following line in ES6

<Redirect from="/invitation/:code" to="/auth/register/:code" />

to this

<Redirect from={`/auth/invitation/${code}`} to={`/auth/register/${code}`} />