docs: update example

hemengke1997 · Sep 18, 2024 · 567d6da · 567d6da
1 parent d05b513
commit 567d6da
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 17 deletions.
diff --git a/playground/remix-flat-routes/READMD.md b/playground/remix-flat-routes/READMD.md
@@ -44,12 +44,19 @@ i18next.changeLanguage = async (lng?: string, ...args) => {
 5. 在路由变化时，重复第3步
 ```ts
 // root.tsx
-export const loader = () => null // 需要导出loader，shouldRevalidate才会生效
+let url: URL
+
+export const loader: LoaderFunction = async () => {
+  if (url) {
+    await asyncLoadResource(i18next.language, {
+      namespaces: resolveNamespace(url.pathname),
+    })
+  }
+  return null
+}
 
-export const shouldRevalidate = async ({ nextUrl, defaultShouldRevalidate }: ShouldRevalidateFunctionArgs) => {
-  await asyncLoadResource(i18next.language, {
-    namespaces: resolveNamespace(nextUrl.pathname),
-  })
-  return defaultShouldRevalidate
+export const shouldRevalidate: ShouldRevalidateFunction = ({ nextUrl }: ShouldRevalidateFunctionArgs) => {
+  url = nextUrl
+  return true
 }
 ```
diff --git a/playground/remix-flat-routes/app/root.tsx b/playground/remix-flat-routes/app/root.tsx
@@ -2,7 +2,9 @@ import { type PropsWithChildren } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Link,
+  type LoaderFunction,
   ScrollRestoration,
+  type ShouldRevalidateFunction,
   type ShouldRevalidateFunctionArgs,
   useLocation,
   useOutlet,
@@ -34,13 +36,21 @@ const RouteAnimation = ({ children }: PropsWithChildren) => {
   )
 }
 
-export const loader = () => null
+let url: URL
 
-export const shouldRevalidate = async (args: ShouldRevalidateFunctionArgs) => {
-  await asyncLoadResource(i18next.language, {
-    namespaces: resolveNamespace(args.nextUrl.pathname),
-  })
-  return args.defaultShouldRevalidate
+export const loader: LoaderFunction = async () => {
+  console.log(url, 'url')
+  if (url) {
+    await asyncLoadResource(i18next.language, {
+      namespaces: resolveNamespace(url.pathname),
+    })
+  }
+  return null
+}
+
+export const shouldRevalidate: ShouldRevalidateFunction = ({ nextUrl }: ShouldRevalidateFunctionArgs) => {
+  url = nextUrl
+  return true
 }
 
 export function Component() {

diff --git a/playground/remix-ssr/app/routes/$lang+/_layout.tsx b/playground/remix-ssr/app/routes/$lang+/_layout.tsx
@@ -2,12 +2,21 @@ import { type ShouldRevalidateFunctionArgs } from '@remix-run/react'
 import i18next from 'i18next'
 import { resolveNamespace } from '@/i18n/i18n'
 
-export const clientLoader = () => null
+let url: URL
 
-export const shouldRevalidate = async ({ nextUrl }: ShouldRevalidateFunctionArgs) => {
-  await window.asyncLoadResource?.(i18next.language, {
-    namespaces: [...resolveNamespace(nextUrl.pathname)],
-  })
+export const loader = async () => {
+  console.log(url, 'url')
+
+  if (url) {
+    await window.asyncLoadResource?.(i18next.language, {
+      namespaces: resolveNamespace(url.pathname),
+    })
+  }
+  return null
+}
+
+export const shouldRevalidate = ({ nextUrl }: ShouldRevalidateFunctionArgs) => {
+  url = nextUrl
   return true
 }