Correct way to set queryString in react-router-dom?

Question

My application uses angularJS, so I'm migrating it to React. I'm navigating to a route: /index like this $urlServiceProvider.rules.otherwise('/index').Note that I'm using angularJS's urlServiceProvider to navigate to /index which has $stateProvider set like this :

$stateProvider.state('index', {
     component: AppController,
     url: '/index',
     template: `<div id="application"></div>`
})

// AppController.jsx

import * as ReactDOM from 'react-dom'
import * as React from 'react'
import App from './App'
export class AppController implements ng.IComponentController {
  constructor() {}

  $onInit(): void {
    ReactDOM.render(<App />, document.getElementById('application'))
  }
}

<App /> component is a component in react which has routes defined for every page.

Now, this works fine but what If I want to set queryString params, which I did it like this: /index?redirect=true. Now, inside <App /> component if I log the value like:

// App

const { redirect } = useLocation()
console.log('Redirect value is ', redirect) // Expecting true here

I get nothing printed in console. Am I doing it correct here?

What is useLocation hook here? Is it the useLocation hook from react-router-dom? What version of react-router-dom do you have installed? — Drew Reese
– Drew Reese, Commented May 10, 2022 at 23:58

Drew Reese · Accepted Answer · 2022-05-11 00:02:29Z

3

If using react-router-dom@6 you can use the useSearchParams hook.

Example:

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

...

const [searchParams] = useSearchParams();
const redirect = searchParams.get("redirect");

If using react-router-dom@5 you will need to use the useLocation hook and access the location.search value and instantiate your own URLSearchParams object.

Example:

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

...

const { search } = useLocation();
const searchParams = new URLSearchParams(search);
const redirect = searchParams.get("redirect");

In RRDv5 you can abstract a custom hook to do this for you:

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

answered May 11, 2022 at 0:02

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Simmi George Over a year ago

I got the console to print but it's throwing null as the value. This is what I'm passing into urlServiceProvider : $urlServiceProvider.rules.otherwise('/index?redirect=true') and in $stateProvider :

$stateProvider.state('index', {      component: AppController,      url: '/index',      template: `<div id="application"></div>` })

. I don't think I've to do changes in $stateProvider here right?

Drew Reese Over a year ago

@SimmiGeorge I wouldn't think you would, but my Angular knowledge is pretty minimal and limited really old Angular 1 or 2 stuff, and even that I only learned the bare minimum to get stuff to work (React app built on top of an older Angular app base 😠).

Collectives™ on Stack Overflow

Correct way to set queryString in react-router-dom?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related