Tenía algunos componentes de alerta cuando cada uno hacía clic; será redirigido a una página
<div className="question11"> {data.map((itm) => ( <Link key={itm._id} href={{ pathname: "/[itm]", query: { id: itm._id }, }} as={`/${encodeURIComponent( itm.Name.replace(/[^a-zA-Z0-9 - _ . ~]/g, "").replace( / /g, "-" ) )}`} > <Alert className="question13">{itm.Name}</Alert> </Link> ))} </div> La página redirigida tiene una URL con el siguiente patrón http://localhost:3000/itm.Name . Ejemplo: http://localhost:3000/spiderman-no-way-home-release-date-in-india. itm._id para acceder a los datos correspondientes en la página redirigida
export async function getServerSideProps(context) { var id1 = context.query.id; // console.log(context.query.id); const queryRequest = fetch("https://askover.wixten.com/questone/" + id1).then( async (res) => await res.json() ); Cuando hago clic en los componentes de alerta, puedo pasar el itm._id y la página se redirige correctamente. El problema ocurre cuando ingreso manualmente la URL en el navegador. El problema aquí es que no obtengo el itm._id del componente de alerta. La respuesta que se me ocurrió aquí es crear una API para acceder a la API pasando itm.Name , pero eso requerirá deconstruir itm.Name a su forma original, y es posible que itm.Name no sea único cada vez que esté allí otro método por el cual también puedo acceder a itm._id , si puedo usar la URL en http://localhost:3000/itm._id/itm.También nombre este formato, creo que estará bien tal como lo hace StackOverflow .
Cuando actualice la página, perderá el contexto, incluso si usa alguna tienda (local, sesión, etc.) que no funcionará para el usuario que visita su aplicación por primera vez.
Una cosa que siempre queda es la URL, ni el almacenamiento ni el contexto. Para resolver este tipo de problemas, lo que puede hacer es pasar los parámetros id y slug a la URL y leerlos cuando sea necesario.
Consulta más detalles aquí
Directorio siguiente.js
paginas
La URL se verá así: https://localhost:3000/123/my-post-slug , Slug es opcional, ayudará con fines de SEO.
[babosa].js
const Component = (props) => ( <div> <h1>{props.title}</h1> <p>{props.content}</p> </div> ); export async function getServerSideProps(context) { const id = context.params.id; const data = fetch(`https://askover.wixten.com/questone/${id}`).then((res) => await res.json()); return { props: data, } }