React Router v4 Redirect with parameters

Question

I have a route set up:

<Route path="/search/:name" component={foo} />

In a component I am trying to redirect based on the entered name:

<Redirect to="/search" />

I want to pass this.state.name to the Redirect, like /search/name. How?

If the `this.state.name` is available in the scope, you can simply write ```` — Giri, Jul 28 '17 at 12:10
When results are printed I get: Search results for ${this.state.name} as a string... — Matt Saunders, Jul 28 '17 at 12:13
Sorry, I've updated the comment. SO's formatting was a bit messed up. React complained because, you're writing JS code inside the JSX syntax. It needs to be enclosed in { } — Giri, Jul 28 '17 at 12:16
This still isn't working - it's just printing out the result as a string — Matt Saunders, Jul 28 '17 at 12:18
Are you sure you're utilizing the `params` from the `Route`'s props? — Giri, Jul 28 '17 at 12:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150403/discussion-between-giri-and-matt-saunders). — Giri, Jul 28 '17 at 12:23

score 13 · Accepted Answer · answered Jul 28 '17 at 12:37

13

Resolved:

I had to wrap in curly braces like so:

<Redirect to={"/search/" + this.state.name} />

(Thanks to Giri for guidance)

answered Jul 28 '17 at 12:37

Matt Saunders

4

No problem!. I see you got confused a bit while I was using backticks instead of quotes. Sorry about that!. But avoid these kind of string concatenation wherever possible by using the backticks. For more info, [Have a look at this](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals) – Giri Jul 28 '17 at 12:47

1 Answers1