Vercel SWR更新路线更改数据

Question

我有使用Vercel SWR加载的分数列表。在我的设置中，IM使用相同的组件渲染分数，但根据用户路由，分数应更新。

路由：

/scores /SCORES/SOCCER /scores/basketball

scores.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>
}

问题

当页面加载所有内容时，所有内容都按预期工作。当我单击下一个/链接以更改路由时，我可以看到路由器更改，但是数据不会更改。我尝试使用Window.Location更改路线，并且数据按预期更改。

我在听路由器路径变化时尝试使用突变，但这无效。

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

任何人都知道更改路由时重新加载SWR数据的正确方法吗？

Answer 1

如果有键更改或通过突变函数，SWR将获取数据。根据您的情况，我认为有两种可能的方法：

1. nextJS路由器事件在这里/a>

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    // SWR mutate function
    mutate()
  }

  router.events.on('routeChangeStart', handleRouteChange)
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [])

2. 使用不同的NextJS路由器路径作为SWR键

const address = router.asPath
const { data, mutate } = useSWR(address, fetcher, {