Merge pull request #529 from acelaya-forks/feature/react-router-7

Update to react-router 7

Author: acelaya

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [0.12.0] - 2024-12-05
+### Added
+* *Nothing*
+
+### Changed
+* Update to react-router 7.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* Remove support for react-router 6.
+
+### Fixed
+* *Nothing*
+
+
 ## [0.11.0] - 2024-11-30
 ### Added
 * [#491](https://github.com/shlinkio/shlink-web-component/issues/491) Add support for colors in QR code configurator.

README.md

@@ -81,13 +81,13 @@ export function App() {
 
 ### Routes prefix
 
-Sections are handled via client-side routing with `react-router-dom`. `ShlinkWebComponent` will add its own `<BrowserRouter />` unless already rendered inside a router.
+Sections are handled via client-side routing with `react-router`. `ShlinkWebComponent` will add its own `<BrowserRouter />` unless already rendered inside a router.
 
 If you render it inside a router, make sure you pass the prefix for all routes handled by this component.
 
 ```tsx
 import { ShlinkWebComponent } from '@shlinkio/shlink-web-component';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router';
 
 export function App() {
   return (

dev/App.tsx

@@ -3,7 +3,7 @@ import { FetchHttpClient } from '@shlinkio/shlink-js-sdk/browser';
 import type { FC } from 'react';
 import { useCallback } from 'react';
 import { useEffect, useMemo, useState } from 'react';
-import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Link, Navigate, Route, Routes } from 'react-router';
 import { ShlinkWebComponent } from '../src';
 import type { Settings } from '../src/settings';
 import { ShlinkWebSettings } from '../src/settings';
@@ -50,18 +50,21 @@ export const App: FC = () => {
       </header>
       <div className="wrapper">
         <Routes>
-          <Route
-            path="/settings/*"
-            element={(
-              <div className="container pt-4">
-                <ShlinkWebSettings
-                  settings={settings}
-                  updateSettings={setSettings}
-                  defaultShortUrlsListOrdering={{}}
-                />
-              </div>
-            )}
-          />
+          <Route path="/settings">
+            <Route
+              path="*"
+              element={(
+                <div className="container pt-4">
+                  <ShlinkWebSettings
+                    settings={settings}
+                    updateSettings={setSettings}
+                    defaultShortUrlsListOrdering={{}}
+                  />
+                </div>
+              )}
+            />
+            <Route path="" element={<Navigate replace to="general" />} />
+          </Route>
           <Route
             path={routesPrefix ? `${routesPrefix}*` : '*'}
             element={apiClient && serverVersion ? (

package-lock.json

@@ -46,12 +46,12 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "^2.0.1",
-    "@shlinkio/shlink-frontend-kit": "^0.6.0",
+    "@shlinkio/shlink-frontend-kit": "^0.7.0",
     "@shlinkio/shlink-js-sdk": "^1.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.1",
-    "react-router-dom": "^6.20.1",
+    "react-router": "^7.0.2",
     "reactstrap": "^9.2.0"
   },
   "peerDependenciesMeta": {

package.json

@@ -4,7 +4,7 @@ import { useToggle } from '@shlinkio/shlink-frontend-kit';
 import { clsx } from 'clsx';
 import type { FC, ReactNode } from 'react';
 import { useEffect } from 'react';
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router';
 import { AsideMenu } from './common/AsideMenu';
 import type { FCWithDeps } from './container/utils';
 import { componentFactory, useDependencies } from './container/utils';
@@ -79,17 +79,27 @@ const Main: FCWithDeps<MainProps, MainDeps> = ({ createNotFound }) => {
                 <Route path="/overview" element={<Overview />} />
                 <Route path="/list-short-urls/:page" element={<ShortUrlsList />} />
                 <Route path="/create-short-url" element={<CreateShortUrl />} />
-                <Route path="/short-code/:shortCode/visits/*" element={<ShortUrlVisits />} />
+                <Route path="/short-code/:shortCode/visits">
+                  {['', '*'].map((path) => <Route key={path} path={path} element={<ShortUrlVisits />} />)}
+                </Route>
                 <Route path="/short-code/:shortCode/edit" element={<EditShortUrl />} />
                 {supportsRedirectRules && (
                   <Route path="/short-code/:shortCode/redirect-rules" element={<ShortUrlRedirectRules />} />
                 )}
                 <Route path="/short-urls/compare-visits" element={<ShortUrlVisitsComparison />} />
-                <Route path="/tag/:tag/visits/*" element={<TagVisits />} />
+                <Route path="/tag/:tag/visits">
+                  {['', '*'].map((path) => <Route key={path} path={path} element={<TagVisits />} />)}
+                </Route>
                 <Route path="/tags/compare-visits" element={<TagVisitsComparison />} />
-                <Route path="/domain/:domain/visits/*" element={<DomainVisits />} />
-                <Route path="/orphan-visits/*" element={<OrphanVisits />} />
-                <Route path="/non-orphan-visits/*" element={<NonOrphanVisits />} />
+                <Route path="/domain/:domain/visits">
+                  {['', '*'].map((path) => <Route key={path} path={path} element={<DomainVisits />} />)}
+                </Route>
+                <Route path="/orphan-visits">
+                  {['', '*'].map((path) => <Route key={path} path={path} element={<OrphanVisits />} />)}
+                </Route>
+                <Route path="/non-orphan-visits">
+                  {['', '*'].map((path) => <Route key={path} path={path} element={<NonOrphanVisits />} />)}
+                </Route>
                 <Route path="/manage-tags" element={<TagsList />} />
                 <Route path="/manage-domains" element={<ManageDomains />} />
                 <Route path="/domains/compare-visits" element={<DomainVisitsComparison />} />

src/Main.tsx

@@ -3,7 +3,7 @@ import type Bottle from 'bottlejs';
 import type { FC, ReactNode } from 'react';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { Provider as ReduxStoreProvider } from 'react-redux';
-import { BrowserRouter, useInRouterContext } from 'react-router-dom';
+import { BrowserRouter, useInRouterContext } from 'react-router';
 import type { ShlinkApiClient } from './api-contract';
 import type { Settings } from './settings';
 import { SettingsProvider } from './settings';