如何在Next.js中解析查询字符串参数（附代码示例）

Jovie
1,213 阅读3分钟

查询字符串是一种向URL传递变量的方法，它以键值对的形式出现，以"？"开头，并以"&"分隔每个后面的 "键=值 "对。在上面的URL中，我们可以看到我们有变量 "variable "和值 "foo"，以及变量 "name "和值 "bar"。 它们通常用于将HTML表单的结果发送到一个URL，或者发送任何少量的数据。

它们被用于网站的前端和后端，在Next.js中，有两种定义前端组件的方法，所以我们将讨论你可能试图访问查询字符串参数的所有三种情况。

在Next JS中使用查询字符串

要在Next.js中访问查询字符串参数，我们可以使用 useRouter钩子，该钩子由NextJS提供。它返回的路由器对象包括 router.query属性，包含我们要找的参数。看一下这个快速的例子吧。

import { useRouter } from 'next/router';

export default function Example() {
    const router = useRouter();

    const { name, location } = router.query;
    const query = router.query;

    return (
        <div>
            <h1>
                Hi! I&apos;m <span>{name}</span>
            </h1>
            <h2>Location: {location}</h2>
            <h2>Age: {query.age}</h2>
            <h2>Title: {query.title}</h2>
        </div>
    );
}

而这个NextJS页面从这个URL渲染的内容：

http://localhost:3005/example?name=Omari&amp;location=England&amp;age=57

router.query 得到填充了来自URL的查询字符串参数。你可以用router.query.property像任何正常的对象属性一样访问这些，或者我们可以使用对象重构来使我们的代码更整洁。任何没有作为查询字符串参数提供的值将显示为未定义，这解释了为什么标题显示为空白。(注：如果你想知道这些奇怪的类名是什么，以及造型是怎么来的，请查看我们关于TailwindCSS的页面！)

类组件替代

由于 useRouter是一个钩子，它不能在类组件中使用。对于React，强烈建议使用功能组件而不是类组件，你可以在这里找到更多关于它们之间的区别。然而，如果你仍然需要使用类组件，在withRouter HOC中也有一种方法，即高阶组件。如果你对这些不熟悉，请到这里来了解更多的信息。

下面是上述使用类组件的等效代码：

import { withRouter } from 'next/router';
import { Component } from 'react';

class ClassComponentExample extends Component {
    render() {
        const router = this.props.router;
        const { name, location, age, title } = router.query;
        return (
            <div>
                <h1>
                    Hi! I&apos;m <span>{name}</span>
                </h1>
                <h2>Location: {location}</h2>
                <h2>Age: {age}</h2>
                <h2>Title: {title}</h2>
            </div>
        );
    }
}

export default withRouter(ClassComponentExample);

代码大部分是相似的，但是由于我们不能在类组件中使用钩子，HOC withRouter将路由器对象作为一个道具传递给组件。在这之后，代码就基本相同了。

在后端查询字符串

Next.js还为开发后端API提供了一个内置的解决方案，我们可以通过一个接受请求和响应参数的函数为我们的API定义路由。你可以通过属性访问请求中存在的任何查询参数。 req.query属性：

export default function handler(req, res) {
  res.status(200).json(req.query);
}

然后我们可以看到我们得到的响应：

就像通过前端的 useRouter()，我们会得到一个包含所有提供的查询参数的对象，然后你可以根据需要使用这些参数

谢谢你的阅读，希望这一切都很有意义如果你有任何疑问或建议，或者你只是想让我知道你喜欢这篇文章，请在下面留下评论!

avatar
文章
阅读
粉丝