agatha/react-ssr-boilerplate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implement react-router

Browse Source
This commit is contained in:
agatha 2024-04-12 20:43:08 -04:00
parent d7e9854e70
commit fb64977d06
4 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/client/Routes.js Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
import { Route } from "react-router-dom";
import Home from "./components/Home";
export default () => {
return (
<div>
<Route exact path="/" component={Home} />
</div>
) ;
};

11
src/client/index.js
View File

@ -1,6 +1,11 @@
import React from "react"; import React from "react";
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import Routes from './Routes';
import Home from './components/Home'; ReactDOM.hydrate(
<BrowserRouter>
ReactDOM.hydrate(<Home />, document.querySelector('#root')); <Routes />
</BrowserRouter>,
document.querySelector('#root')
);

11
src/helpers/renderer.js
View File

@ -1,9 +1,14 @@
import React from "react"; import React from "react";
import { renderToString } from "react-dom/server"; import { renderToString } from "react-dom/server";
import Home from "../client/components/Home"; import { StaticRouter } from "react-router-dom";
import Routes from "../client/Routes";
export default () => { export default (req) => {
const content = renderToString(<Home />); const content = renderToString(
<StaticRouter location={req.path} context={{}}>
<Routes />
</StaticRouter>
);
return ` return `
<!DOCTYPE html> <!DOCTYPE html>

2
src/index.js
View File

@ -5,7 +5,7 @@ const app = express();
app.use(express.static('public')); app.use(express.static('public'));
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.send(renderer()); res.send(renderer(req));
}); });
app.listen(3000, () => { app.listen(3000, () => {