英文:
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: "/updatepage",
search: `pageId=${props.pageId}&spaceId=${props.parentId}`,
},
{
state: { param1: props.pageId, param2: props.parentId },
}
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论