如何删除 NextJS 中的查询参数

Question

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

我只想像这样重定向/projects/1/mobile-app 。 我一直试图解决这个问题一个星期。 我找到了几个解决方案，但它们与 router.push 一起使用，我在 map 中使用链接。有人告诉我在链接有效后使用 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

看一下这个

下一个链接

在文档中，它说

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 中一样在客户端持久化查询参数的 state，这样你就可以避免在 URL 上显示查询。

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

2. 创建一个 onClick 处理程序，它接受查询参数作为 function 参数，在 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;