Follow me on Twitter, happy to take your suggestions on topics or improvements
In part 3, we learned how to create dynamic URLs in react router. In this part, we will learn how to handle query params in the URL.
Lets create a new route for search page with query params,
// App.js ... const SearchPage = () => { return ( <h3>Search Page</h3> ); } const App = () => { return ( <section className="App"> <Router> <Link to="/">Home</Link> <Link to="/about">About</Link> <Link to="/users">Users</Link> <Link to="/search?q=react">Search</Link> <Route exactabout with browser reload</a> </section> ); }; ...
Its our usual way of creating a link, route definition and a component. If you closely look at it, there is no difference between static route and route with query params.
We don't need to define query params in the route definition because by default it will be handled by the react router and send the query params into a props to the component.
It won't match the path if we define the path like this
/search/?q=:searchValue. You can try it in the codesandbox.
Now, we need to access all the query params we pass to the URL in the component. In our previous part, we talked about how react router pass two params
match and
location.
- For dynamic routes, react router pass the route params to
matchprops
- For routes with query param, the info about query params will be send through
locationprops
Lets see, what information it sends in the
location props
... const SearchPage = ({ match, location }) => { return ( <p> <strong>Location Props: </strong> {JSON.stringify(location, null, 2)} </p> ); } ...
You can see on the search page,
Location Props: { "pathname": "/search", "search": "?q=react", "hash": "", "key": "allc40" }
You can clearly see, react router pass the query params info in
location.search. If you add more query params, you with get everything in the same string value. eg.,
?q=react&limit=3
In order to get each value, you can use your own helper library or query params npm package so that you can get the values as nice key value pair objects.
One such package is
yarn add qs. But there are many, you can choose which one suits your URL
Lets show the
location.search value in the component.
const SearchPage = ({ match, location }) => { return ( <p> <strong>Query Params: </strong> { location.search } </p> ); }
Thats it folks, see you in next blog posts soon. Keep supporting and help me teach more and learn more 🤗
You can checkout the codebase for this series here and the code for this section here
Discussion (3)
I would like to add that there is no need for a custom or 3rd party lib to handle query param parsing, use the URLSearchParams API instead, it's native
Awesome jose. Will definitely check it
Awesome jose, will definitely check it out