Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Router v4 Redirect with parameters

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?

like image 555
Matt Saunders Avatar asked Jul 28 '17 12:07

Matt Saunders


People also ask

How do you pass parameters in URL in react?

Using React Router, when you want to create a Route that uses a URL parameter, you do so by including a : in front of the value you pass to Route 's path prop. Finally, to access the value of the URL parameter from inside of the component that is rendered by React Router, you can use React Router's useParams Hook.

How do you pass additional data while redirecting to a route in react?

Using Link So when we click on the Register link, it will redirect to the /register route. But Link also allows us to pass additional data while redirecting. Here, at the place of data_you_need_to_pass , we can pass a string or object , array and so on and in the /register route we will get that data in props.

How do I get query params in react-router-dom?

Get a single Query String value import React from 'react'; import { useSearchParams } from 'react-router-dom'; const Users = () => { const [searchParams] = useSearchParams(); console. log(searchParams); // ▶ URLSearchParams {} return <div>Users</div>; };


1 Answers

Resolved:

I had to wrap in curly braces like so:

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

(Thanks to Giri for guidance)

like image 138
Matt Saunders Avatar answered Sep 29 '22 08:09

Matt Saunders