Update React Router Dom To 6.x

README.md

@@ -88,22 +88,21 @@ import { renderWithSSR } from "meteor/communitypackages:react-router-ssr";
 import { useTracker } from "meteor/react-meteor-data";
 
 import React from "react";
-import { Route } from "react-router-dom";
-
+import { Route, Routes } from "react-router-dom";
 import DashboardPage from "./imports/ui/pages/dashbaord";
 import ProfilePage from "./imports/ui/pages/profile";
 import LoginPage from "./imports/ui/pages/login";
 
-const App = ({ user }) => {
+const App = () => {
   const { user } = useTracker(() => ({
     user: Meteor.user()
   }));
   if (user) {
     return (
-      <>
-        <Route exact path="/" component={DashboardPage} />
-        <Route path="/profile/:username" component={ProfilePage} />
-      </>
+      <Routes>
+        <Route exact path="/" element={DashboardPage} />
+        <Route path="/profile/:username" element={ProfilePage} />
+      </Routes>
     );
   }
 

client.jsx

@@ -2,7 +2,7 @@ import { FastRender } from 'meteor/communitypackages:fast-render';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Switch } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 
 import './version-check';
 
@@ -19,11 +19,9 @@ try {
 const renderWithSSR = (component, { renderTarget = 'react-target', storeOptions } = {}) => {
 
     let ReactRouterSSR = () => (
-        <Router>
-            <Switch>
-                {component}
-            </Switch>
-        </Router>
+        <BrowserRouter>
+            {component}
+        </BrowserRouter>
     );
 
     if (storeOptions) {
@@ -35,11 +33,9 @@ const renderWithSSR = (component, { renderTarget = 'react-target', storeOptions
 
         ReactRouterSSR = () => (
             <Provider store={store}>
-                <Router>
-                    <Switch>
-                        {component}
-                    </Switch>
-                </Router>
+                <BrowserRouter>
+                    {component}
+                </BrowserRouter>
             </Provider>
         );
     }

package.js

@@ -2,7 +2,7 @@
 
 Package.describe({
   name: 'communitypackages:react-router-ssr',
-  version: '3.0.4',
+  version: '3.1.0',
   summary: 'Simple isomorphic React SSR for Meteor with subscribed data re-hydration',
   git: 'https://github.com/Meteor-Community-Packages/react-router-ssr.git',
   documentation: 'README.md',

server.jsx

@@ -3,7 +3,7 @@ import { FastRender } from 'meteor/communitypackages:fast-render';
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { StaticRouter } from 'react-router';
+import { StaticRouter } from "react-router-dom/server";
 import ReactDom from 'react-dom'; // eslint-disable-line no-unused-vars
 import { renderToString } from 'react-dom/server';
 

version-check.js

@@ -2,9 +2,9 @@ import { checkNpmVersions } from 'meteor/tmeasday:check-npm-versions';
 
 checkNpmVersions(
   {
-    react: '16.x || 17.x',
-    'react-dom': '16.x || 17.x',
-    'react-router-dom': '4.x || 5.x',
+    react: '17.x',
+    'react-dom': '17.x',
+    'react-router-dom': '6.x',
     'react-helmet': '6.x',
   },
   'communitypackages:react-router-ssr',