I am facing an issue with using query params and react router dom.
When I do an API call and it returns me a status 200, I redirect the user to the results page with a history.push. So far everything is working fine. However, when I am on the results page and refresh the page, I want to use the url with query params to perform a new search, unfortunately React Router Dom is not able to recognize the url and redirects me.
App.tsx
<PrivateRoute path="/search?value=:searchValue&type=:searchType">
<Dashboard />
</PrivateRoute>
<Route path="/redirection" component={RedirectionPage} />
<Redirect to="/login" />
Search.tsx
history.push({
pathname: `/search?${formattedSearch
.map((search) => `value=${search.value}&type=${search.type}`)
.toString()
.replace(",", "|")}`,
state: search
});
This history.push works great and redirects the user to the desired page.
But when I refresh the page with the same url, React Router Dom doesn't recognize the route and doesn't redirect me to the component.
Do you have any ideas ? Thank you and wish you a nice day.
Route match params are not the same thing as URL query string parameters.
You'll want to access the query string from the location object.
{ key: 'ac3df4', // not with HashHistory! pathname: '/somewhere', search: '?some=search-string', <-- query string hash: '#howdy', state: { [userDefined]: true } }
React-router-dom query parameters demo
They create a custom useQuery hook:
const useQuery = () => new URLSearchParams(useLocation().search);
For your use case, on the page rendering the Dashboard you want to then extract the query string parameters. Given path='/search?value=:searchValue&type=:searchType':
const query = useQuery();
const email = query.get('value');
const token = query.get('type');
If Dashboard is a class-based component then you will need to access props.location and process the query string yourself in a lifecycle method. This is because React hooks are only validly used by functional components.
componentDidMount() {
const { location } = this.props;
const query = new URLSearchParams(location.search);
const email = query.get('value');
const token = query.get('type');
...
}
path='/search?value=:searchValue&type=:searchType'
The path params are only relevant in the path portion of a URL, you can't define params for the queryString portion of the URL. The above path is equivalent to path='/search' from react-router-dom's perspective.
<PrivateRoute path="/search">
<Dashboard />
</PrivateRoute>