CODEWITHSUNDEEP
reactjssearchreact-router-dom
misha-from-lviv
misha-from-lviv

Reputation: 80

How to update match.params?

The react app has search page. There are input. The path is 'search/:query', and by default you see zero results. If you go to 'search/star%20wars' you will see some results. In componentDidMount() I added if statement to load result if match.params.query is not null.

If I type into search input Spider Man and click submit - I trigger a search and show results. But if you reload page - you will see the result about Star Wars. So how update match.params.query? Or may be there other solution of fix this.

Upvotes: 0

Views: 2279

Answers (2)

Muhammad Danial Iqbal
Muhammad Danial Iqbal

Reputation: 1776

You need to update the history object as well.

What you are doing is altering the history object available to you and calculating the results based on that object. But when you will refresh the page it still holds the original history object.

One way of doing it, you need to push or replace a new route in the history.

Because evert search page is a new page, so if you want the previous pages to stay preserved you should use history.push otherwise history.replace

Implement it like this:

var routeObj = {
pathname: samePath,
state: sameState,
query: newQuery
}
//push it in your history using which ever routing library you are using.

//For Example: 
router.history.replace(routeObj);

Note: Do not worry about rendering speed on changing the history. React is smart enough to handle that. Basically whenever you will push a route whose component is already mounted it will not unmount and remount the same component again, rather it will just change the props and will re render it. The callback for this case will be => componentWillReceiveProps

Upvotes: 1

Shobhit Chittora
Shobhit Chittora

Reputation: 1279

@misha-from-lviv The way I see your problem statement is that you have two source of truth on is the query params, using which you should update your state, and the other is the default state which is populated from the default value of your filters.

As @Akash Bhandwalkar suggested, you do need to update the route in using the History API. But also you also a need a top-level orchestrator for your application state, which will allow you to read and write to the history api ( change your route ) and also do an XHR / fetch for you to get the results.

How I'd approach this is that I'd start with a Parent component, namely FiltersContainer , which actually does this orchestration to read and write to the url. This Container would have all the side-effect knowledge for fetching and updating the routes ( error handling included ). Now the all the child components ( filters and search results maybe ) will just read the state thus orchestrated and re-render.

Hope this guides your thinking. Do revert here if you need further guidance. 😇

Cheers! 🍻

Upvotes: 1

Related Questions