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.
4 Réponses :
Essayez de supprimer as="about"
, puis accédez à nouveau à la page "about", le problème devrait être résolu. Codesandbox
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.
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>
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 > ) }
ce sont des codes js, veuillez les convertir en ts au besoin
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 } } } }; }
Mise à jour vers Next.JS 10. Il est livré avec la résolution automatique de href qui résout votre problème.
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..