Remix遇到的问题(待编辑

·

1 min read

有一个action用来切换深色模式,发现延迟很大,因为我首页有一个列表,是在loader加载的,每次都会重新加载。

During client-side transitions, Remix will optimize reloading of routes that are already rendering, like not reloading layout routes that aren't changing. In other cases, like form submissions or search param changes, Remix doesn't know which routes need to be reloaded, so it reloads them all to be safe. This ensures your UI always stays in sync with the state on your server.

官网里面说,表单提交之后,会重新加载所有的路由。

那我只是切换成深色主题,不用重新加载很多数据,只要加载root路由。

但是`shouldRevalidate`只能在你不想重新加载的路由里面使用,去关掉他,这样的话,随着路由变多,那就需要在每个路由里面去关掉重新加载,这样不行啊!

我先试试:

export function shouldRevalidate({
  defaultShouldRevalidate,
  formAction,
}: ShouldRevalidateFunctionArgs) {
  console.log({ formAction })
  if (formAction === '/your-action-to-update-theme') {
    return false
  }

  return defaultShouldRevalidate
}

这个问题解决咯,但是我还有一个语言切换的功能,是用Link做的,我要在切换语言的时候,也不要重新加载,怎么办呢?

shouldRevalidate里面还有两个对象,是currentParams和nextParams,我只要检测这两个对象里面**只有**一个叫lang的值发生了变化,就返回false就可以啦!

  const params = Object.assign({}, currentParams, nextParams)
  if (Object.keys(params).length === 1 && params.lang) {
    return false
  }

🎉🎉🎉

😀