update razzle example

Author: adrai

example/razzle-ssr/package.json

@@ -6,18 +6,27 @@
     "start": "razzle start",
     "build": "razzle build",
     "test": "razzle test --env=jsdom",
+    "start:static": "serve -s build/public",
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "razzle": "3.1.3",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "babel-preset-razzle": "4.0.4",
+    "express": "4.17.1",
+    "html-webpack-plugin": "5.3.1",
+    "i18next": "20.2.1",
+    "i18next-browser-languagedetector": "6.1.0",
+    "i18next-fs-backend": "1.1.1",
+    "i18next-http-backend": "1.2.1",
+    "i18next-http-middleware": "3.1.1",
+    "mini-css-extract-plugin": "1.4.1",
+    "razzle": "4.0.4",
+    "razzle-dev-utils": "4.0.4",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-i18next": "11.8.12",
     "react-router-dom": "5.2.0",
-    "react-i18next": "11.4.0",
-    "i18next": "20.0.0",
-    "i18next-browser-languagedetector": "5.0.0",
-    "i18next-http-middleware": "3.0.0",
-    "i18next-fs-backend": "1.0.6",
-    "i18next-http-backend": "1.0.15"
+    "serve": "11.3.2",
+    "webpack": "5.31.2",
+    "webpack-dev-server": "3.11.2"
   }
 }

example/razzle-ssr/src/App.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import Route from 'react-router-dom/Route';
-import Switch from 'react-router-dom/Switch';
+import { Route, Switch } from 'react-router-dom';
 import Home from './Home';
 import './App.css';
 
-function App() { 
+function App() {
   return (
     <Switch>
       <Route exact path="/" component={Home} />

example/razzle-ssr/src/client.js

@@ -1,8 +1,8 @@
-import App from './App';
-import BrowserRouter from 'react-router-dom/BrowserRouter';
+import { BrowserRouter } from 'react-router-dom';
 import React, { Suspense } from 'react';
 import { hydrate } from 'react-dom';
 import { useSSR } from 'react-i18next';
+import App from './App';
 import './i18n';
 
 const BaseApp = () => {
@@ -14,12 +14,9 @@ const BaseApp = () => {
       </BrowserRouter>
     </Suspense>
   );
-}
+};
 
-hydrate(
-  <BaseApp />,
-  document.getElementById('root'),
-);
+hydrate(<BaseApp />, document.getElementById('root'));
 
 if (module.hot) {
   module.hot.accept();