Next js中页面刷新时查询值丢失？ [给出的例子]

Question

我正在制作一个只有两页的简单 Next Js 应用程序..

index.tsx：

import React from "react";
import Link from "next/link";

export default function Index() {
  return (
    <div>
      <Link
        href={{
          pathname: "/about",
          query: { candidateId: 8432 }
        }}
        as="about"
      >
        Go to the about page
      </Link>
    </div>
  );
}

根据上面的代码，点击Go to the about page会转到关于页面，使用query我也会在关于页面中收到传递的查询值。

about.tsx

import React from "react";
import Router, { withRouter } from "next/router";

function About({ router: { query } }: any) {
  return (
    <div>
      Candidate Id: <b> {query.candidateId} </b>
    </div>
  );
}

export default withRouter(About);

这会显示值，但是当我们在 /about 页面时刷新页面时，收到的 candidateId 会消失。

要求：请帮助我保留从一个页面传递到另一个页面的查询值，即使在页面刷新时也是如此。

注意：根据我的要求，我不应该在导航时在 url 上显示canidateId，因此我使用as 方法。我知道如果我删除@987654334，我可以实现它@ 但我无法在导航时在索引页面中删除它。原因是这将导致在 url 中显示不想要的候选 ID ..

尝试了这个解决方案：https://stackoverflow.com/a/62974489/7785337 但这会在页面刷新时提供 empty query 对象。

困扰了很长时间，请帮助我。

Answer 1

index.tsx 文件

保持代码不变。

   import React from "react";
   import Link from "next/link";
   
   export default function Index() {
     return (
       <div>
         <Link
           href={{
             pathname: "/about",
             query: { candidateId: 8432 }
           }}
           as="about"
         >
           Go to the about page
         </Link>
       </div>
     );
}

AboutUs.tsx

代码从这里开始

在 useEffect 中添加路由器作为依赖项应该可以解决问题。

  import Router, { useRouter } from "next/router";
  import React, { useState, useEffect } from 'react';

  function About({ router: { query } }: any) {
    const route = userRouter();
    const [candidateId, setCandidateid] = useState();

    useEffect(() => {
    const {candidateId} = router.query  
    if(candidateId) {
     setCandidateid(candidateid)
   }},[router])  //Here goes the dependency

    return (
      <div>
        Candidate Id: <b> {candidateId} </b>
      </div>
    );
  }
  
  export default (About);

Answer 2

更新到 Next.JS 10。它带有 Automatic Resolving of href 可以解决您的问题。

Answer 3

我最好的选择是将candidateId 存储在客户端的加密会话中。您可以读取/验证 getServerSideProps() 中的 cookie 并将其内容传递给页面组件。如果这听起来可行，我建议您查看next-iron-session。

另一种方法是检查candidateId 是否存在于getServerSideProps() 的查询对象中。如果确实如此，则将其直接传递给页面组件。如果没有，要么在别处获取它，重定向，要么传递一些默认值。将以下起始代码附加到您的 about.tsx：

/* ... */

export function getServerSideProps({ query }: any) {
  // if query object was received, return it as a router prop:
  if (query.candidateId) {
    return { props: { router: { query } } };
  }
  // obtain candidateId elsewhere, redirect or fallback to some default value:
  /* ... */
  return { props: { router: { query: { candidateId: 8432 } } } };
}

Answer 4

如果您不想使用查询参数，您可能需要创建一个“存储”来保存在整个页面中持续存在的变量。

示例代码如下。

//candidatestore.js
export const CandidateStoreContext = createContext()

export const useCandidateStore = () => {
    const context = useContext(CandidateStoreContext)
    if (!context) {
        throw new Error(`useStore must be used within a CandidateStoreContext`)
    }
    return context
}

export const CandidateStoreProvider = ({ children }) => {

    const [candidateId, setCandidateId] = useState(null);

    return (
        <CandidateStoreContext.Provider value={{ candidateId, setCandidateId }}>        
                        {children}    
        </CandidateStoreContext.Provider >

    )
}

然后您需要将 Provider 包裹在您的应用周围，例如

<CandidateStoreProvider><App /></CandidateStoreProvider>

这样你就可以在你的索引页面和关于页面的任何地方使用如下。

const { candidateId, setCandidateId } = useCandidateStore()

UseContext

在您的代码中，它可能看起来像这样。

import React from "react";
import Link from "next/link";
import { useCandidateStore } from './candidatestore'

export default function Index() {
  const { candidateId, setCandidateId } = useCandidateStore()
  useEffect(() => {
     setCandidateId(thecandidateId)
  })
  return (
    <div>
      <Link
        href={{
          pathname: "/about",
        }}
        as="about"
      >
        Go to the about page
      </Link>
    </div>
  );
}

function About({ router: { query } }: any) {

  const { candidateId, setCandidateId } = useCandidateStore()
  return (
    <div>
      Candidate Id: <b> {candidateId} </b>
    </div>
  );
}

Answer 5

尝试删除as="about"，然后再次导航到“关于”页面，问题应该消失了。 Codesandbox