Home unable to pass search and state parameters together using navigate of useNavigate

Questions

unable to pass search and state parameters together using navigate of useNavigate

July 17, 2023

When I am passing the search parameter or state parameter individually, they are working fine but when passing them together, they are giving null value on the target component.

My requirement is to display the url like http://localhost:3000/updatepage?pageId=xxxxxx and it also need to pass the state parameter spaceId.

Working individually

navigate({
  pathname: "/updatepage",
  search: `pageId=${props.pageId}&spaceId=${props.parentId}`,
});

OR

navigate("/updatepage", {
  state: { param1: props.pageId, param2: props.parentId },
});

but I want to send like the below one to create the url and also to get the value that I need on the next component, but thats not working.

Not working

const stateParams = {
  param1: props.parentId,
};

navigate({
  pathname: "/updatepage",
  search: `pageId=${props.pageId}`,
  state: stateParams,
});

Using the above method, the search parameter is working fine but the state parameter is undefined.

Any idea why both search and state parameters are not working together?

>Solution :

Any idea why both search and state parameters are not working
together?

They can work together, but in different parts of the navigate function.

The first arg to navigate is typed as To:

/**
 * Describes a location that is the destination of some navigation, either via
 * `history.push` or `history.replace`. May be either a URL or the pieces of a
 * URL path.
 */
export type To = string | Partial<Path>;

You can pass a partial Path object:

/**
 * The pathname, search, and hash values of a URL.
 */
export interface Path {
  /**
   * A URL pathname, beginning with a /.
   */
  pathname: string;

  /**
   * A URL search string, beginning with a ?.
   */
  search: string;

  /**
   * A URL fragment identifier, beginning with a #.
   */
  hash: string;
}

Note that the Path object hasn’t any state property. state is passed in the navigate function’s second arg, typed as:

{
  replace?: boolean;
  state?: any;
  relative?: RelativeRoutingType;
}

See react-router/packages/router/history.ts for more details.

Solution

If you are passing both a path object and state you’ll need to pass both arguments to the function.

Example:

navigate(
  {
    pathname: "/updatepage",
    search: `pageId=${props.pageId}&spaceId=${props.parentId}`,
  },
  {
    state: { param1: props.pageId, param2: props.parentId },
  }
);