From b245213533949ab4aec55fd1c755e4ae0bfa1032 Mon Sep 17 00:00:00 2001
From: Riri <Daydreamerriri@outlook.com>
Date: Wed, 22 May 2024 19:23:46 +0800
Subject: [PATCH] chore: add example of load JSON file

---
 examples/with-loader/src/docs/test.json |  3 +++
 examples/with-loader/src/main.tsx       |  4 ++++
 examples/with-loader/src/pages/json.tsx | 20 ++++++++++++++++++++
 3 files changed, 27 insertions(+)
 create mode 100644 examples/with-loader/src/docs/test.json
 create mode 100644 examples/with-loader/src/pages/json.tsx

diff --git a/examples/with-loader/src/docs/test.json b/examples/with-loader/src/docs/test.json
new file mode 100644
index 0000000..6df3039
--- /dev/null
+++ b/examples/with-loader/src/docs/test.json
@@ -0,0 +1,3 @@
+{
+  "key": "THIS IS A TEST JSON"
+}
diff --git a/examples/with-loader/src/main.tsx b/examples/with-loader/src/main.tsx
index 6211f86..862ecd1 100644
--- a/examples/with-loader/src/main.tsx
+++ b/examples/with-loader/src/main.tsx
@@ -13,6 +13,10 @@ const routes: RouteRecord[] = [
     path: '/docs/:docs',
     lazy: () => import('./pages/[docs]'),
   },
+  {
+    path: '/json',
+    lazy: () => import('./pages/json'),
+  },
 ]
 
 const routesWithLayout = [{
diff --git a/examples/with-loader/src/pages/json.tsx b/examples/with-loader/src/pages/json.tsx
new file mode 100644
index 0000000..f499602
--- /dev/null
+++ b/examples/with-loader/src/pages/json.tsx
@@ -0,0 +1,20 @@
+import { useLoaderData } from 'react-router-dom'
+
+export default function Docs() {
+  const json = useLoaderData() as typeof import('../docs/test.json')
+
+  return (
+    <div>{json.key}</div>
+  )
+}
+
+export const Component = Docs
+
+export const entry = 'src/pages/json.tsx'
+
+export async function loader() {
+  // If you use `import('../docs/test.json?raw')`, it will return a JSON string.
+  const json = (await import('../docs/test.json')).default
+
+  return json
+}