无法同时使用`useNavigate`的`navigate`函数传递搜索和状态参数。

huangapple go评论73阅读模式
英文:

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

问题

当我单独传递搜索参数或状态参数时,它们可以正常工作,但当同时传递它们时,它们在目标组件上的值为空。

我的要求是显示URL,类似于 http://localhost:3000/updatepage?pageId=xxxxxx,同时需要传递状态参数 spaceId。

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

或者

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

但是我想像下面这样发送请求以创建URL并在下一个组件中获取我需要的值,但这不起作用。

不起作用
const stateParams = {
  param1: props.parentId,
};

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

使用上面的方法,搜索参数可以正常工作,但状态参数是 undefined

有任何想法为什么搜索和状态参数不能同时工作?

英文:

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?

答案1

得分: 1

Oh, coding can be like a magical puzzle, can't it? 🧩✨ Let's dive into this code adventure!

So, it seems like you're wondering why the search and state parameters aren't working together, right? Well, here's the scoop: they can actually work together, but they like to hang out in different parts of the navigate function.

The first part, called To, is where you put things like the URL or pieces of a URL path. 🌐 It can handle a partial Path object, which includes pathname, search, and hash, but no state.

But fear not! The state property has its own special place in the navigate function's second argument. 🎩✨ It's all typed out nicely, too!

So, if you want both your path stuff and state stuff to be friends, you just need to pass both arguments to the function, like a friendly gathering. 🥳🎈

Here's an example to make it crystal clear:

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

And if you want to know even more, check out react-router/packages/router/history.ts. It's like a treasure trove of information! 📜💎

Happy coding, adventurer! 🚀🔍🔮

英文:

> 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: &quot;/updatepage&quot;,
    search: `pageId=${props.pageId}&amp;spaceId=${props.parentId}`,
  },
  {
    state: { param1: props.pageId, param2: props.parentId },
  }
);

huangapple
  • 本文由 发表于 2023年7月17日 10:09:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/76701133.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定