React-router: Add redirection status code

[BentoumiTech]

Right now this how the server side redirection looks like with the <ServerRouter>

Server

    const result = context.getResult();

    if (result.redirect) {
      // Do your redirection
      return;
    }

Client

      <Redirect to={`/${myroute}`} />

It would be nice if I could add a permanent/temporary attribute to the redirect component that I can then read from the server to know if I need to perform a 301 or 302 redirection.

The difference between those two redirections is quite important SEO wise but also for the user experience as some browser (eg: chrome) cache 301 redirection but don't for 302 ...

[alisd23]

Yeah that makes sense, maybe the redirect variable needs to be an object with a statusCode field on it.
Fancy putting in a PR? If not I'll get round to it at some point.

[ryanflorence]

<Redirect to={{ pathname: '/somewhere', state: { status: 302 } }}/>

then

res.redirect(redirect.state.status, redirect.pathame)

[1nd]

FYI, if you use v2 like me, use this instead

<Redirect to="/somewhere" state={{ status: 302 }} />

[walshie4]

Redirects don't seem to have state https://github.com/ReactTraining/react-router/blob/v2.8.1/docs/API.md#redirect

[timdorr]

@walshie4 state is a property on the location descriptor you pass in the to prop, just like pathname.

[walshie4]

hmm perhaps I set this up wrong when trying earlier with version 2.8.0. Had
to={{ pathname: '/', state: { status: 301 }}} but had gotten some errors about expecting a string rather than an object.

EDIT

Warning: Failed prop type: Invalid prop `to` of type `object` supplied to `Redirect`, expected `string`.

[travi]

Is this not actually possible? It appears that <Redirect> expects to to only supply a string.

The docs for to on <Redirect> aren't explicit about not supporting a full location descriptor, but they also dont mention the option of the object version, like is mentioned for to on <Link>.

Was anyone able to actually accomplish defining the type of redirect as described above with v3? If not possible in that way, is there another way?

[walshie4]

Not sure about v3, but from the Redirect source it looks like a state prop would make it through into the replace call. https://github.com/ReactTraining/react-router/blob/v2.8.1/modules/Redirect.js#L44

I think this would allow you to do what @ryanflorence has suggested above

res.redirect(redirect.state.status, redirect.pathame)

[travi]

you're right, accessing state at that point would suggest that it should be possible to get to that point. maybe you are more familiar with what route.to would be referring to in the line i linked to above then?

when I have a <Redirect> defined as <Redirect from="temporary-redirect" to={{pathname: '/existing-route', state: {status: MOVED_TEMPORARILY}}} />, the error that i'm seeing is message: route.to.charAt is not a function which appeared to me as if it was taking the to prop directly and trying to call .charAt(0) on the object i'm providing. is that not the case?

[walshie4]

Yeah it appears in v2.8.1 (possibly elsewhere as well) the query and state props exist separately (see code linked in previous comment) while to is _just_ the pathname. Appears this was just an oversight when to transitioned to accept either a pathname or location descriptor object.

Try this instead:

<Redirect
   from="temporary-redirect"
   to="/existing-route"
   state={ { status: MOVED_TEMPORARILY } }
/>

[travi]

ah... that is the dot i was failing to connect. should have been more obvious, but the comments above about the location descriptor sent my mind down that path and i wasnt seeing the more obvious answer that the api was simply not updated from v2. thank you so much for helping me get there.