React Router Dom doesn't recognize url with query params

Question

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.

Answer 1

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');

Class-based component?

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');
  ...
}

Note regarding path

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>