Passing parameters through Link component or route

I have a home page with a few inputs and a search button. When the search button (which is a react-router <Link /> component) is clicked, it routes to my /search route. I need access to the search terms that were entered in the previous route to query my database and display the results.

How can I pass the search terms through either the <Link /> component or some other way through the route so that the /search route and component has access to them?

You can pass paramaters to the Link.

<Link to={'/search/foo/bar'}>Search</Link>

Where foo and bar are two parameters to your search view.

In react-router you’ll have :

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

If you don’t want a query like app.com/search/foo/bar but you want app.com/search?query=foo&filter=bar, I think you can use the property location

this.props.location.query

Which router library are you using?

He uses react router, because the Link component is provided by this router :wink:

Oops, didn’t notice that :slight_smile:

I’ve edited my router to include variables in the path and pass them as a string in the <Link /> components to prop. I can then access those variables in the url via this.props.params.*. This does however seem to affect the paths to local directories (like images in /public) as well as the the href of the <Link />s underlying anchor element. Is this the standard pattern for a search feature?