3
votes

Les valeurs de requête perdues lors de l'actualisation de la page dans Next js? [Exemple donné]

Je crée une simple application Next Js qui n'a que deux pages.

index.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);

Conformément au code ci-dessus, cliquez sur Go to the about page à propos de la page à propos et en utilisant la query je reçois également les valeurs de requête transmises dans la page à propos.

about.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>
  );
}

Cela affiche la valeur, mais lors de l'actualisation de la page pendant que nous sommes dans /about page, le candidateId reçu disparaît.

Condition: veuillez m'aider à conserver la valeur de la requête transmise d'une page à une autre, même lors de l'actualisation de la page.

Remarque: selon mes besoins, je ne devrais pas afficher le canidateId sur l'url lors de la navigation et donc j'utilise as approche .. Je sais que je peux y parvenir si je supprime as mais je ne peux pas le supprimer ici dans la page d'index pendant la navigation .. La raison est cela conduira à afficher candidatId dans l'url, ce qui n'est pas prévu.

J'ai essayé cette solution: https://stackoverflow.com/a/62974489/7785337 mais cela donne un objet de requête vide lors de l'actualisation de la page.

Coincé depuis très longtemps avec cela, veuillez m'aider.

Modifier dawn-microservice-sho7z


2 commentaires

AFAIK, "l'état de la route" est assez transitoire, il n'existe vraiment que pendant la transition de la route. Le rechargement de la page ne recharge pas la transition. Je pense que vous auriez besoin de conserver les données transmises à localStorage, ou à tout ce que vous avez disponible, qui est accessible après un chargement / rechargement de page.


@DrewReese, Merci pour votre commentaire et je pense que d'autres personnes sont également confrontées au même problème, comme ici stackoverflow.com/questions/61891845/… et la solution proposée ne fonctionne pas pour moi .. Si vous pouviez m'aider, merci de fourrer mon codesandbox avec votre solution et postez-la comme réponse s'il vous plaît .. Je vous demande simplement si vous pouviez faire .. Parce que je vois les choses d'une manière différente de la vôtre et j'apprends beaucoup de vous .. S'il vous plaît, aidez-moi si vous le pouvez. . Merci..


4 Réponses :


1
votes

Essayez de supprimer as="about" , puis accédez à nouveau à la page "about", le problème devrait être résolu. Codesandbox


1 commentaires

J'ai déjà mentionné en question que cela fonctionnera si je supprime as mais que je ne devrais pas car cela conduira à afficher candidateId dans l'url.



1
votes

Si vous ne souhaitez pas utiliser le paramètre de requête, vous devrez peut-être créer un «magasin» qui enregistre vos variables qui persistent dans vos pages.

Exemple de code comme suit.

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>
  );
}

Ensuite, vous devez envelopper le fournisseur autour de votre application comme

const { candidateId, setCandidateId } = useCandidateStore()

De cette façon, vous pouvez utiliser n'importe où comme suit à la fois dans votre page d'index et votre page à propos.

<CandidateStoreProvider><App /></CandidateStoreProvider>

UseContext

Dans vos codes, cela devrait probablement ressembler à quelque chose comme ça.

//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 >

    )
}


1 commentaires

ce sont des codes js, veuillez les convertir en ts au besoin



1
votes

Mon meilleur pari serait de stocker le candidateId dans une session cryptée côté client. Vous pouvez lire / vérifier les cookies dans getServerSideProps() et transmettre leur contenu au composant de page. Si cela semble faisable, je vous recommande de consulter la prochaine session de fer .

Une autre approche consisterait à vérifier si candidateId existe dans l'objet de requête dans getServerSideProps() . Si c'est le cas, passez-le directement au composant de page. Sinon, récupérez-le ailleurs, redirigez ou transmettez une valeur par défaut. Ajoutez le code de démarrage suivant à votre 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 } } } };
}


0 commentaires

1
votes

Mise à jour vers Next.JS 10. Il est livré avec la résolution automatique de href qui résout votre problème.


0 commentaires