add router for check ssr in sub path

ajaxsys · ajaxsys · commit c157c97e1cff · 2024-08-20T00:12:15.000+09:00
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,10 +15,12 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
+    "@remix-run/router": "^1.19.1",
     "babel-loader": "^9.1.3",
     "express": "^4.19.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-middleware": "^7.3.0",
diff --git a/server.js b/server.js
@@ -1,16 +1,35 @@
-const express = require('express');
-const React = require('react');
-const ReactDOMServer = require('react-dom/server');
-const path = require('path');
-const App = require('./src/App').default;
+import express from 'express';
+import path from 'path';
+import fs from 'fs';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { StaticRouter } from 'react-router-dom/server';
+import App from './src/App';
 
 const app = express();
 
-// 提供打包后的静态文件
 app.use(express.static(path.resolve(__dirname, 'dist')));
 
 app.get('*', (req, res) => {
-  const appHtml = ReactDOMServer.renderToString(React.createElement(App));
+  const context = {};
+  
+  const appHtml = ReactDOMServer.renderToString(
+    <StaticRouter location={req.url} context={context}>
+      <App />
+    </StaticRouter>
+  );
+
+  // const indexFile = path.resolve(__dirname, 'dist', 'index.html');
+  // fs.readFile(indexFile, 'utf8', (err, data) => {
+  //   if (err) {
+  //     console.error('Error reading index.html', err);
+  //     return res.status(500).send('Some error happened');
+  //   }
+
+  //   return res.send(
+  //     data.replace('<div id="root"></div>', `<div id="root">${appHtml}</div>`)
+  //   );
+  // });
   const html = `
     <!DOCTYPE html>
     <html lang="en">
@@ -29,5 +48,5 @@ app.get('*', (req, res) => {
 });
 
 app.listen(3000, () => {
-  console.log('Server is running on http://localhost:3000');
+  console.log('Server is listening on port 3000');
 });
diff --git a/src/App.js b/src/App.js
@@ -1,14 +1,21 @@
-// src/App.js
 import React from 'react';
+import { Routes, Route, Link } from 'react-router-dom';
+import Home from './Home';
+import Blog from './Blog';
 
 function App() {
   return (
     <div>
-      <h1>Hello, SSR!</h1>
-      <p>This is a simple server-side rendered React application.</p>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/blog/1">Blog 1</Link>
+      </nav>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/blog/:id" element={<Blog />} />
+      </Routes>
     </div>
   );
 }
 
 export default App;
-
diff --git a/src/Blog.js b/src/Blog.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+function Blog() {
+  const { id } = useParams();
+  return <h1>Blog Page with ID: {id}</h1>;
+}
+
+export default Blog;
diff --git a/src/Home.js b/src/Home.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Home() {
+  return <h1>Home Page</h1>;
+}
+
+export default Home;
diff --git a/src/index.js b/src/index.js
@@ -1,18 +1,11 @@
-import React, { useState } from 'react';
-import { hydrateRoot } from 'react-dom/client';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 
-function HydrationTest() {
-  const [clicked, setClicked] = useState(false);
-
-  return (
-    <div>
-      <App />
-      <button onClick={() => setClicked(!clicked)}>
-        {clicked ? 'Clicked!' : 'Click me'}
-      </button>
-    </div>
-  );
-}
-
-hydrateRoot(document.getElementById('root'), <HydrationTest />);
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);
