example url: https://example.com/?foo=bar

import { useSearchParams } from 'react-router-dom'

const Component = () => {
  const [searchParams, setSearchParams] = useSearchParams()
  const foo = searchParams.get('foo')
  console.log(foo) // "bar"
  return <></>
}

Obviously, you need to use this inside a router.

Note: all search param values are strings.

It's was always the case that you should have accessed the search value from the location object instead of the history object.

See history is mutable

The history object is mutable. Therefore it is recommended to access the location from the render props of <Route>, not from history.location. This ensures your assumptions about React are correct in lifecycle hooks.

If the tutorial is showing using history.location.search I wouldn't give it much weight.

In react-router-dom@6 however, there are no longer any route props, i.e. no history, location, or match props. You instead access these all via React hooks. Note that the history object is also no longer directly exposed out to components, replaced by a navigate function via the useNavigate hook.

To access the queryString RRDv6 introduced a new useSearchParams hook.

Given URL "/somepath?someQueryParam=123"

import { useSearchParams } from 'react-router-dom';

...

const [searchParams, setSearchParams] = useSearchParams();

const someQueryParam = searchParams.get("someQueryParam"); // 123

Additional Question

Edit: Btw I am not so good at router and currently converting a code from v5 I was wondering what should keyword return in v5 ? The path I am currently in?

location.search is a string, so you could process the string manually, or create a URLSearchParams object.

Check the RRDv5 Query Parameters demo

They create a custom useQueryHook:

function useQuery() {
  const { search } = useLocation();

  return React.useMemo(() => new URLSearchParams(search), [search]);
}

then access named query params with the getter:

let query = useQuery();

...

const name = query.get("name");