在NextJS中使用path参数检查查询值是否为空

Question

我目前正在寻找一种方法，其中我将能够知道查询值是否为空。

我使用的是路径参数方法。我有文件pages/search/[variable1].js

下面是我的代码:

import { useRouter } from "next/router"
const Variable= () => {
const router = useRouter()
const { variable1 } = router.query
console.log(variable1);
}

例如，我访问localhost:3000/search/abc，控制台将显示abc。如果我通过localhost:3000/search/访问它，控制台不显示任何内容。什么可能是条件，以便我可以检查variable1是否为空?我试着做三元运算符variable1? console.log("not empty") : console.log("empty")，但我仍然没有看到empty在控制台中。

Answer 1

如果你没有在pages/search/index.js下定义的页面，而只有pages/search/[variable1].js，这意味着你的页面[variable1].js将永远不会捕获/search路由，也永远不会显示你所期望的。

这里有两个选项:

1. 更改页面定义以捕获搜索下的所有路由，因此您将更改路径为pages/search/[...variable1].js，这也将捕获搜索索引路由(/search)
2. 简单地在pages/search/index.js下创建页面，并使用查询参数捕获搜索变量

Answer 2

要访问localhost:3000/search，您需要在相关路径中有index.js文件夹。

localhost:3000/search/[veriable1].js文件夹的期望是它期望在搜索之后有一个查询。所以localhost:3000/search和localhost:3000/search/_example_不是同一个页面，它们不能通过彼此访问查询。