next.js 无法获取页面.tsx中的搜索参数|下一个js13

0ejtzxu1 于 2023-10-18 发布在其他

关注(0)|答案(1)|浏览(112)

我正在构建一个Next.js项目，使用下一个13页路由器，我需要从服务器组件中获取搜索参数

export default async function Home({
  params,
  searchParams,
}: {
  params: {domain: string};
  searchParams: {[key: string]: string | string[] | undefined};
}) {
  const [data] = await Promise.all([getSiteData(params.domain)]);

  if (!data) {
    notFound();
  }
  console.log(searchParams);

当我进入domain.localhost：3000时，它返回“domian”，但是当我进入domain.localhost：3000/时，它返回“domian”。limit=3或任何数字或字符串，searchParams prop总是返回{}
即使我尝试searchParams.limit或searchParams. limit]，它总是返回'undefined'那么什么是正确的方法来获得tbe搜索参数从服务器组件感谢帮助

next.js

来源：https://stackoverflow.com/questions/77226632/cannot-get-search-params-in-page-tsx-next-js-13

1条答案

按热度按时间

mu0hgdu01#

如果需要访问服务器端组件中的查询参数，可以使用getServerSideProps函数中的上下文对象来实现。下面是一个如何在服务器端组件中访问查询参数的示例

// pages/somepage.js
import React from 'react';

const SomePage = ({ searchParams }) => {
  return (
    <div>
      <h1>Search Params: {JSON.stringify(searchParams)}</h1>
    </div>
  );
};

export async function getServerSideProps(context) {
  const { query } = context;

  // `query` contains the query parameters
  // You can pass the query parameters as props to your component
  return {
    props: {
      searchParams: query,
    },
  };
}

export default SomePage;

赞(0）回复(0）举报 2023-10-18

我来回答

next.js 无法获取页面.tsx中的搜索参数|下一个js13

1条答案

相关问题

热门标签

最新问答