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 <Redirect to={`/search/${this.state.name}`} /> — Cloud Engineer
– Cloud Engineer, Commented Jul 28, 2017 at 12:10
When results are printed I get: Search results for ${this.state.name} as a string... — Matt Saunders
– Matt Saunders, Commented Jul 28, 2017 at 12:13
Ideally I would do: <Redirect to="/search" + this.state.name /> but React complains about that — Matt Saunders
– Matt Saunders, Commented Jul 28, 2017 at 12:15
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 { } — Cloud Engineer
– Cloud Engineer, Commented Jul 28, 2017 at 12:16
This still isn't working - it's just printing out the result as a string — Matt Saunders
– Matt Saunders, Commented Jul 28, 2017 at 12:18

Matt Saunders · Accepted Answer · 2017-07-28 12:37:52Z

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, 2017 at 12:37

Matt Saunders

4,4307 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cloud Engineer Over a year ago

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

Collectives™ on Stack Overflow

React Router v4 Redirect with parameters

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related