Mastering React Test-Driven Development

Using the location query string to store component state

In the current implementation of CustomerSearch, we save the search configuration—the search term, the row limit, and the last row IDs—in a component state. But if we move the search configuration to the browser's query string, the user will be able to bookmark search pages, or share them with colleagues.

A search URL might look as follows:

/searchCustomers?searchTerm=An&limit=20&previousRowIds=20

What will need to change in our implementation to support this design change?

We'll replace onClick handlers with Link components. That skips the need to use the useState hook. Our search parameters will be passed back into our component when React Router re-renders the component with new ...