feat: upgrade to react-router@6.x

examples/react-apollo/src/App.jsx

@@ -1,6 +1,6 @@
 import './App.css'
 import React, { useState } from 'react'
-import { Link, Route, Switch } from 'react-router-dom'
+import { Link, Route, Routes } from 'react-router-dom'
 import logo from './logo.svg'
 import { ClientOnly } from 'vite-ssr'
 import { ApolloClient, ApolloProvider, createHttpLink } from '@apollo/client'
@@ -43,15 +43,15 @@ export default function App({ isClient, url, router, apolloCache }) {
             </ul>
           </nav>
         </header>
-        <Switch>
+        <Routes>
           {router.routes.map((route) => (
             <Route
               key={route.path}
               path={route.path}
-              component={route.component}
+              element={route.component}
             />
           ))}
-        </Switch>
+        </Routes>
 
         <ClientOnly>
           <div>This text only renders in client side</div>

examples/react/src/App.jsx

@@ -1,6 +1,6 @@
 import './App.css'
 import React, { useState } from 'react'
-import { Link, Route, Switch } from 'react-router-dom'
+import { Link, Route, Routes } from 'react-router-dom'
 import logo from './logo.svg'
 import { ClientOnly } from 'vite-ssr'
 
@@ -31,15 +31,17 @@ export default function App({ isClient, url, router, request }) {
           </ul>
         </nav>
       </header>
-      <Switch>
+      <Routes>
         {router.routes.map((route) => {
           return (
-            <Route key={route.path} path={route.path}>
-              <route.component route={route} baseUrl={baseUrl} />
-            </Route>
+            <Route
+              key={route.path}
+              path={route.path}
+              element={<route.component route={route} baseUrl={baseUrl} />}
+            />
           )
         })}
-      </Switch>
+      </Routes>
 
       <ClientOnly>
         <div>This text only renders in client side</div>

package.json

@@ -48,10 +48,10 @@
     "@vitejs/plugin-react": "^1.1.3",
     "@vitejs/plugin-vue": "^2.0.1",
     "@vueuse/head": "0.x",
-    "react": "^16.8 || ^17",
-    "react-dom": "^16 || ^17",
+    "react": "^17",
+    "react-dom": "^17",
     "react-helmet-async": "^1.0.0",
-    "react-router-dom": "^5.0.0",
+    "react-router-dom": "^6",
     "vite": "^2.7.7",
     "vue": "^3.2.26",
     "vue-router": "^4.0.0"
@@ -91,6 +91,7 @@
     "chalk": "^4.1.2",
     "connect": "^3.7.0",
     "node-fetch": "^2.6.1",
+    "react-router-dom": "^6.2.2",
     "react-ssr-prepass": "^1.4.0"
   },
   "devDependencies": {
@@ -99,10 +100,10 @@
     "@types/fs-extra": "^9.0.12",
     "@types/node": "^16.4.7",
     "@types/node-fetch": "^2.5.9",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "@types/react-router-config": "^5.0.2",
-    "@types/react-router-dom": "^5.1.7",
+    "@types/react": "^17.0.40",
+    "@types/react-dom": "^17.0.13",
+    "@types/react-router-config": "^5.0.6",
+    "@types/react-router-dom": "^5.3.3",
     "execa": "^5.1.1",
     "express": "^4.17.1",
     "fs-extra": "^10.0.0",

src/react/entry-client.ts

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import ReactDOM from 'react-dom'
 import createClientContext from '../core/entry-client.js'
-import { BrowserRouter, useHistory } from 'react-router-dom'
+import { BrowserRouter, useNavigate } from 'react-router-dom'
 import { HelmetProvider } from 'react-helmet-async'
 import { withoutSuffix } from '../utils/route'
 import { createRouter } from './utils'
@@ -31,8 +31,8 @@ export const viteSSR: ClientHandler = async function (
     ...options,
     url,
     spaRedirect: (location) => {
-      const { push } = useHistory()
-      React.useEffect(() => push(location), [push])
+      const navigate = useNavigate()
+      React.useEffect(() => navigate(location), [navigate])
     },
   })
 
@@ -53,6 +53,7 @@ export const viteSSR: ClientHandler = async function (
     HelmetProvider,
     {},
     React.createElement(
+      // @ts-ignore
       BrowserRouter,
       { basename: routeBase },
       React.createElement(

src/react/entry-server.ts

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import ssrPrepass from 'react-ssr-prepass'
 import { renderToString } from 'react-dom/server.js'
-import { StaticRouter } from 'react-router-dom'
+import { StaticRouter } from 'react-router-dom/server'
 import { HelmetProvider } from 'react-helmet-async'
 import { getFullPath, withoutSuffix } from '../utils/route'
 import { createRouter } from './utils'
@@ -62,6 +62,7 @@ const viteSSR: SsrHandler = function (
       HelmetProvider,
       { context: helmetContext },
       React.createElement(
+        // @ts-ignore
         StaticRouter,
         { basename: routeBase, location: fullPath },
         provideContext(React.createElement(App, context), context)