Tengo una lista de partituras que estoy cargando usando vercel SWR. En mi configuración, estoy usando el mismo componente para generar puntajes, pero dependiendo de la ruta de los usuarios, los puntajes deben actualizarse.

Enrutamiento:

/scores /scores/soccer /scores/basketball

Puntuaciones.tsx

 export function Scores() { const address = `api/scores` const fetcher = async (url: string) => { const response = await axios.get( url, ) return response.data } const { data, mutate } = useSWR(address, fetcher, { fallbackData, revalidateOnFocus: true, revalidateOnReconnect: true, refreshInterval: 300000, shouldRetryOnError: false, revalidateOnMount: true, }) return <div>{data.map((score) => <ScoreComponent score={score} />}</div> }

Problema

Cuando la página se carga, todo funciona como se esperaba. Cuando hago clic en un enlace siguiente para cambiar la ruta, puedo ver que el enrutador cambia pero los datos no cambian. Intenté usar window.location para cambiar la ruta y los datos cambian como se esperaba.

Intenté usar mutar mientras escuchaba el cambio de ruta del enrutador, pero eso no funcionó.

 useEffect(() => { mutate() }, [router.asPath])

¿Alguien sabe la forma correcta de recargar los datos de SWR al cambiar de ruta?