如何删除 NextJS 中的查询参数

Question

我有太多查询和 url 像这样 /projects/1/&category=Branding&title=Mobile+App&about=Lorem+ipsum+Lorem+ 并且比这更长！。

我只想像这样重定向 /projects/1/mobile-app 。我一直试图解决这个问题一个星期。我找到了几个解决方案，但它们与 router.push 一起使用，而我在地图中使用 Link 。有人告诉我在有效链接后使用 as={} 但页面在刷新后出现错误。

项目.tsx

mport { AddProject } from "../../data/projects/AddProject";
import { projectsData } from "./../../types/types";

const Projects = () => {
  const [loadMore, setLoadMore] = useState<number>(4);
  const [activeMenu, setActiveMenu] = useState<string>("All");
    
  function getFilteredList() {
    if (activeMenu === "All") {
      return AddProject;
    }
    return AddProject.filter((project) => project.category === activeMenu);
  }

  const showMoreItems = () => {
    setLoadMore((prevValue) => prevValue + 4);
  };

  const filteredList = useMemo(getFilteredList, [activeMenu]);
   {filteredList.slice(0, loadMore).map((project: projectsData) => (
            <Link
              key={project.id}
              href={{
                pathname: "/projects/" + project.id,
                query: {
                  id: project.id,
                  category: project.category,
                  title: project.title,
                  about: project.aboutproject,
                  company: project.company,
                  client: project.client,
                  date: project.date,
                  website: project.website,
                  image: project.image.src,
                  image1: project.image1.src,
                  image2: project.image2.src,
                  image3: project.image3.src,
                  image4: project.image4.src,
                  image5: project.image5.src,
                },
              }}
              passHref={true}
            >

[项目].tsx

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

const Details = (props: any) => {
  const { query } = props;
  const [relatedPosts] = useState(AddProject);
  const [index, setIndex] = useState<any>(0);

  const getResult = () => {
 
    return relatedPosts.filter(
      (related) => related.category === query.category
    );
  };

  var filteredList = useMemo(getResult, [query.category, relatedPosts]);

  const current = filteredList[index];

  return (
    <>
      <div className="single__page">
        <div className="down__arrow">
          <Links
            activeClass="down__arrow"
            to="about__project"
            spy={true}
            smooth={true}
            offset={-70}
            duration={500}
          >
            <CustomIcons name="DownArrow" />
          </Links>
        </div>
        <div className="single__header">
          <h2>{query.title}</h2>
        </div>
      </div>

Answer 1

看一下这个

next link

在文档中，它说

as - 将在浏览器 URL 栏中显示的路径的可选装饰器。

所以请试一试

<Link
    key={project.id}
    href={{
        pathname: "/projects/" + project.id,
        query: {
            id: project.id,
            category: project.category,
            title: project.title,
            about: project.aboutproject,
            company: project.company,
            client: project.client,
            date: project.date,
            website: project.website,
            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.id}/mobile-app`}
    passHref
>

Answer 2

有两种方法可以解决您的问题。

1. 您可以像在 localStorage 中一样在客户端保留查询参数的状态，这样您就可以避免在 URL 上显示查询。

   但是这种方法的问题是，您无法在 Next.js 中访问 localStorage 数据获取方法，例如服务器端渲染或者静态生成

   2. 创建一个接受查询参数作为函数参数的 onClick 处理程序，在 router.push() 的帮助下，您可以导航到另一个页面，而无需在 URL 中显示查询参数。

   项目.js

   import React, { useState, useMemo } from "react";
   import Image from "next/image";
   import Link from "next/link";
   import CustomIcons from "../svg/CustomIcons";
   import { useRouter } from "next/router";
   
   import { AddProject } from "../../data/projects/AddProject";
   import { projectsData } from "./../../types/types";
   
   const Projects = () => {
     const [loadMore, setLoadMore] = useState < number > 4;
     const [activeMenu, setActiveMenu] = useState < string > "All";
   
     const router = useRouter();
   
     function onClickHandler(project) {
       console.log("clicked/");
       router.push(
         {
           pathname: "/about",
           query: {
             id: project.id,
             category: project.category,
             title: project.title,
             about: project.aboutproject,
             company: project.company,
             client: project.client,
             date: project.date,
             website: project.website,
             image: project.image.src,
             image1: project.image1.src,
             image2: project.image2.src,
             image3: project.image3.src,
             image4: project.image4.src,
             image5: project.image5.src
           }
         },
         "/about"
       );
     }
     function getFilteredList() {
       if (activeMenu === "All") {
         return AddProject;
       }
       return AddProject.filter((project) => project.category === activeMenu);
     }
   
     const showMoreItems = () => {
       setLoadMore((prevValue) => prevValue + 4);
     };
   
     const filteredList = useMemo(getFilteredList, [activeMenu]);
   
     return (
       <>
         <div className="projects_category">
           <ul>
             <li
               className={activeMenu == "All" ? "activemenu" : ""}
               onClick={() => {
                 setActiveMenu("All");
               }}
             >
               All
             </li>
             <li
               className={activeMenu == "Branding" ? "activemenu" : ""}
               onClick={() => {
                 setActiveMenu("Branding");
               }}
             >
               Branding
             </li>
             <li
               className={activeMenu == "Design" ? "activemenu" : ""}
               onClick={() => {
                 setActiveMenu("Design");
               }}
             >
               Design
             </li>
             <li
               className={activeMenu == "Photography" ? "activemenu" : ""}
               onClick={() => {
                 setActiveMenu("Photography");
               }}
             >
               Photography
             </li>
             <li
               className={activeMenu == "Marketing" ? "activemenu" : ""}
               onClick={() => {
                 setActiveMenu("Marketing");
               }}
             >
               Marketing
             </li>
           </ul>
         </div>
   
         <div className="projects">
           <div className="projects__inside">
             <div className="projects__vector">
               <CustomIcons name="ProjectsVector" />
             </div>
   
             {filteredList.slice(0, loadMore).map((project: projectsData) => (
               <button
                 key={project.id}
                 onClick={()=>onClickHandler(project)}
               >
                 <section className="project__item">
                   <div className="project__image">
                     <Image
                       src={project.image.src}
                       height={620}
                       width={520}
                       alt="project"
                     />
                   </div>
                   <div className="project_info">
                     <h5>{project.category}</h5>
                     <h3>{project.title}</h3>
                   </div>
                 </section>
               </button>
             ))}
           </div>
           <div className="load__more">
             <div className="load__icon" onClick={showMoreItems}>
               <CustomIcons name="LoadMore" />
             </div>
           </div>
         </div>
       </>
     );
   };
   
   export default Projects;