React Ssr React-Router

Question

Can someone, please, explain - how to create SSR with React Routes V6, There are a lot of snippets with simple React SSR - without routes.

Maybe there is any course or lesson about React-SSR and it would be great if there would be SSR with react-routers (react-router-dom, especially V6), or any GitHub repo.

Most problem is <StaticRoutes> - i saw documentation but i didn`t get it... :(

Need it for my project - https://github.com/Ivan-Bliminse/movie-b-movie

Welcome @Ivan Bliminse. This doc could help with React-SSR using react-router v6: reactrouter.com/en/v6.3.0/guides/ssr. — Stephen Isienyi
– Stephen Isienyi, Commented Aug 29, 2022 at 18:27
Wow, Thank you! But now i got a problem with : import express from "express"; ^^^^^^ import { StaticRouter } from "react-router-dom/server"; ^^^^^^ SyntaxError: Cannot use import statement outside a module // with all imports... — Ivan Bliminse
– Ivan Bliminse, Commented Aug 31, 2022 at 6:21

Ivan Bliminse · Accepted Answer · 2022-08-31 12:24:46Z

0

SO DONE !

delete "type" : "module" from package.json, if you dont have it then ok,

in folder 'server' create 1 more file => index.js

index.js

require("@babel/register")({
  ignore: [/(node_module)/],
  presets: ["@babel/preset-env", "@babel/preset-react"],
});

require("./server");

and in package.json

"ssr": "node server/index.js"
or
"ssr": "nodemon server/index.js"

ofc before all - install packages

    "@babel/core": "^7.18.13",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-env": "^7.18.10",
    "@babel/register": "^7.18.9",
    "express": "^4.18.1",
    "nodemon": "^2.0.19",

edited Aug 31, 2022 at 12:24

answered Aug 31, 2022 at 12:22

Ivan Bliminse

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stephen Isienyi · Accepted Answer · 2022-09-01 13:45:31Z

0

This doc could help with React-SSR using react-router v6: reactrouter.com/en/v6.3.0/guides/ssr.

answered Sep 1, 2022 at 13:45

Stephen Isienyi

1,3724 gold badges18 silver badges30 bronze badges

Collectives™ on Stack Overflow

React Ssr React-Router

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related