NextJS 页面刷新时查询丢失

Question

router.query.title 刷新页面后消失。

根据我的发现，我必须使用 getServerSideProps，但我不知道在 getServerSideProps 上输入什么。或者有什么办法吗？

编辑：我尝试了 Yilmaz 的解决方案并删除了 as={} 现在它可以工作了。但是现在查询链接太长了，没有使用 as={} 有什么解决办法吗？

index.tsx

const Projects = () => {
  const [projects, setProjects] = useState(data);

  {projects.slice(0, loadMore).map((project) => (
          <Link
            key={project.id}
            href={{
              pathname: "/projects/" + project.title,
              query: {
                id: project.id,
                category: project.category,
                title: project.title,
                image: project.image.src,
                image1: project.image1.src,
                image2: project.image2.src,
                image3: project.image3.src,
                image4: project.image4.src,
                image5: project.image5.src,
              },
            }}
            as={"/projects/" + project.title}
            passHref={true}
          >
}

[id].tsx


import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: {},
  };
};

const Details = () => {
  const router = useRouter();

  return (
    <>
      <div className="single__page">
        <div className="single__header">
          <h2>{router.query.title}</h2>
        </div>
      </div>

Answer 1

import { NextPageContext } from "next";


export const getServerSideProps: GetServerSideProps = async (context: NextPageContext) => { {
      const { query } = context;
      return { props: { query } };
    }

这会将 query 传递给道具。当你将鼠标悬停在 query 上时，ts 已经将其类型推断为：const query: ParsedUrlQuery

在你的组件中

const Details = (props) => {
  // this is object
  const {query}=props
  console.log(query)

  return (
    <>
      <div className="single__page">
        <div className="single__header">
          <h2></h2>
        </div>
      </div>

第二种方法

const Details = () => {
  const [title,setTitle]=useState("")
  const router = useRouter();
  useEffect(() => {
    if (router.isReady) {
      // Code using query
      console.log(router.query);
      // this will set the state before component is mounted
      setTitle(router.query.title)
    }
  }, [router.isReady]);

return (
    <>
      <div className="single__page">
        <div className="single__header">
          <h2>{title}</h2>
        </div>
      </div>
     )
}

NextJS 页面刷新时查询丢失

Query lost on page refresh in NextJS

reactjs

next.js

query-parameters

dynamic-routing

第二种方法