Me disculpo por mi horrible manera de explicar mi problema. He compartido un enlace debajo de la descripción que es exactamente el mismo problema que estoy experimentando. Cualquier tipo de ayuda sería muy apreciada.
Tengo una ruta de directorio como pages/request/[reqid].js. Cuando mi url es localhost:3000/xyz y navego a páginas/solicitud/1 haciendo clic en un botón en la página actual, la página carga correctamente la página con los datos adecuados de [reqid=1] pero cuando intento acceder a páginas/ request/[reqid].js con diferente reqid (supongamos que reqid=2), la url refleja el correcto reqid pages/request/2 pero la página sigue siendo la misma, no cambia. Sin embargo, si vuelvo a otras páginas como localhost:3000/xyz y hago clic en un botón allí para navegar a las páginas/solicitud/2, funciona, pero desde páginas/solicitud/[reqid] no muestra una página asociada a la correspondiente reqid incluso pensó que la url está actualizada. Probé tanto Link como router.push, ambos fallan al mostrar la página requerida correcta.
En realidad, no incluyó que estaba usando getServerProps para obtener los datos, razón por la cual la página no se mostraba, a menos que la página se actualizara manualmente. El estado de la página no se restablece para la navegación entre rutas dinámicas atendidas por el mismo componente de origen.
por ejemplo, proporcione la fuente de la página /a/[param]/index.js, al navegar de /test/123 a /test/124, los estados de la página no se restablecieron.
Entonces, en realidad sucedió que el mismo componente React se renderizó con diferentes accesorios. Por lo tanto, reaccionar lo toma como un componente que se vuelve a representar y hace que la nueva página navegada reciba estados obsoletos.
Para solucionarlo, simplemente agregue {key:} a los accesorios iniciales de la página o getserversideprops
export const getServerSideProps = async (ctx) => { try { const { reqid } = ctx.params; //fetch code return { props: { key: reqid, data:data }, }; } catch (error) { console.log(error); } };