In react-router v5 I was able to use

let keyword = history.location.search

but in react-router v6 I get an error so what is the replacement for that code?

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?

In react-router v5 I was able to use

let keyword = history.location.search

but in react-router v6 I get an error so what is the replacement for that code?

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?

• javascript
• reactjs
• react-router-dom

Share Improve this question Follow edited Aug 6, 2022 at 21:31 Drew Reese 204k1818 gold badges246246 silver badges273273 bronze badges asked Aug 6, 2022 at 20:13 bysEcodebysEcode 13733 silver badges1010 bronze badges 4

• Btw i defined location = useLocation() and imported the useLocation, But the problem is with history. I dont know how to define it – bysEcode Commented Aug 6, 2022 at 20:14
• why do you need history then? use location = useLocation() or reactrouter./docs/en/v6/hooks/use-search-params – Mike Commented Aug 6, 2022 at 20:23
• @Mike i tried location.search and it is not returning anything – bysEcode Commented Aug 6, 2022 at 20:32
• @Mike I am new to react router and i am following a course using v5 and i am using v6(I know that's dumb but i am half way throught) :p . I want to ask you what would history.location.search return in v5 ? – bysEcode Commented Aug 6, 2022 at 20:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 remended 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 ponents, 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");

example url: https://example./?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.