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?
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.
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.
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>; };
Resolved:
I had to wrap in curly braces like so:
<Redirect to={"/search/" + this.state.name} />
(Thanks to Giri for guidance)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With