英文:
How to pass an object to another page using the useRouter from 'next/navigation'?
问题
我在一页上，想要将用户重定向到另一页。
我想使用来自next/navigation的useRouter钩子来向新页面发送一个对象，因为我正在使用应用程序目录。如何更改下面的代码以传递一个对象？
import { useRouter } from 'next/navigation'const router = useRouter()router.push('/dashboard')
如果我使用页面目录，我会这样做：
import { useRouter } from 'next/router'const router = useRouter()router.push({pathname: '/dashboard',query: { key: value },})
我在文档中没有找到如何实现这一点。
英文:
I am on one page, and I want to redirect the user to another page.
I would like to send an object to the new page using the hook useRouter from next/navigation because I'm using the app directory. How can I change the code below to pass an object?
import { useRouter } from 'next/navigation'const router = useRouter()router.push('/dashboard')
If I were using the page directory, I would do it like this:
import { useRouter } from 'next/router'const router = useRouter()router.push({pathname: '/dashboard',query: {key : value},})
I didn't find how to do it in the docs.
答案1
得分: 1
在app文件夹中，router.push(href: string)仅接受href作为字符串参数。如果您需要查询字符串，您需要自行设置，就像这个示例中所示。
在您的情况下，可以这样做：
"use client";import { useRouter } from "next/navigation";export default function ExampleClientComponent() {const router = useRouter();const createQueryString = (name, value) => {const params = new URLSearchParams();params.set(name, value);return params.toString();};return (<buttononClick={() => {router.push("/dashboard" + "?" + createQueryString("key", "value"));}}>Redirect with a query parameter</button>);}
您可以通过传递给页面组件的searchParams来读取它：
// app/dashboard/page.jsexport default function Page({ searchParams }) {return <div>{searchParams.key}</div>;}
或者在任何客户端组件中使用useSearchParams函数：
"use client";import { useSearchParams } from "next/navigation";export default function Page() {const searchParams = useSearchParams();return <div>{searchParams.get("key")}</div>;}
⚠️：查询参数是字符串。您可以一次传递多个参数。但如果您需要将对象传递给一个键，您需要使用params.set("key", JSON.stringify(value))。
在使用它的另一侧使用之前，请调用JSON.parse对值进行解析。
英文:
In the app folder, router.push(href: string) accepts as a parameter only the href as a string. If you need query strings, you need to set them yourself, as they show in this example.
In your case, it can be like so:
"use client";import { useRouter } from "next/navigation";export default function ExampleClientComponent() {const router = useRouter();const createQueryString = (name, value) => {const params = new URLSearchParams();params.set(name, value);return params.toString();};return (<buttononClick={() => {router.push("/dashboard" + "?" + createQueryString("key", "value"));}}>Redirect with a query parameter</button>);}
You would read it with the searchParams passed to your page component:
// app/dashboard/page.jsexport default function Page({ searchParams }) {return <div>{searchParams.key}</div>;}
Or using the useSearchParams function in any client component:
"use client";import { useSearchParams } from "next/navigation";export default function Page() {const searchParams = useSearchParams();return <div>{searchParams.get("key")}</div>;}
⚠️: query parameters are stings. You can pass multiple at once. But if you need to pass an object to one key, you need to params.set("key", JSON.stringify(value)).
And call JSON.parse on the value before using it on the other side.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论