CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Alexandre
Alexandre

Reputation: 115

React Router Dom doesn't recognize url with query params

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.

Upvotes: 8

Views: 12515

Answers (1)

Drew Reese
Drew Reese

Reputation: 202638

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>

Upvotes: 5

Related Questions