|
|
@@ -1,3 +1,4 @@
|
|
|
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
|
|
|
import { use, Suspense } from 'react'
|
|
|
import { hc } from 'hono/client'
|
|
|
import type { InferResponseType } from 'hono/client'
|
|
|
@@ -10,17 +11,50 @@ const fetchData = async () => {
|
|
|
return data.json()
|
|
|
}
|
|
|
|
|
|
-const Component = ({ promise }: { promise: Promise<InferResponseType<typeof client.index.$get>> }) => {
|
|
|
- const data = use(promise)
|
|
|
- return <h2 className="text-2xl">11{data.message}{JSON.stringify(import.meta.env)}</h2>
|
|
|
+const Home = () => {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <h1>Home Page</h1>
|
|
|
+ <p>Welcome to the home page!</p>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
-const App = () => {
|
|
|
+const About = () => {
|
|
|
return (
|
|
|
- <Suspense fallback={'loading...'}>
|
|
|
- <Component promise={fetchData()} />
|
|
|
- </Suspense>
|
|
|
+ <div>
|
|
|
+ <h1>About Page</h1>
|
|
|
+ <p>This is the about page.</p>
|
|
|
+ </div>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
+const ApiDemo = ({ promise }: { promise: Promise<InferResponseType<typeof client.index.$get>> }) => {
|
|
|
+ const data = use(promise)
|
|
|
+ return <h2 className="text-2xl">{data.message}{JSON.stringify(import.meta.env)}</h2>
|
|
|
+}
|
|
|
+
|
|
|
+const router = createBrowserRouter([
|
|
|
+ {
|
|
|
+ path: '/',
|
|
|
+ element: <Home />,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: '/about',
|
|
|
+ element: <About />,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: '/api-demo',
|
|
|
+ element: (
|
|
|
+ <Suspense fallback={'loading...'}>
|
|
|
+ <ApiDemo promise={fetchData()} />
|
|
|
+ </Suspense>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+])
|
|
|
+
|
|
|
+const App = () => {
|
|
|
+ return <RouterProvider router={router} />
|
|
|
+}
|
|
|
+
|
|
|
export default App
|
yourname