Update to react-router 7

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.7.0] - 2024-12-05
+### Added
+* *Nothing*
+
+### Changed
+* Update to react-router 7.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* Remove support for react-router 6.
+
+### Fixed
+* *Nothing*
+
+
 ## [0.6.0] - 2024-10-19
 ### Added
 * *Nothing*

dev/App.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Link, Route, Routes } from 'react-router';
 import { MessagePage } from './block/MessagePage';
 import { ResultPage } from './block/ResultPage';
 import { SimpleCardPage } from './block/SimpleCardPage';
@@ -36,7 +36,10 @@ export const App: FC = () => (
         <Route path="/form/boolean-controls" element={<BooleanControlsPage />} />
         <Route path="/form/search-field" element={<SearchFieldPage />} />
         <Route path="/navigation/dropdowns" element={<DropdownsPage />} />
-        <Route path="/navigation/nav-pills/*" element={<NavPillsPage />} />
+        <Route path="/navigation/nav-pills">
+          <Route path="" element={<NavPillsPage />} />
+          <Route path="*" element={<NavPillsPage />} />
+        </Route>
         <Route path="/ordering/ordering-dropdown" element={<OrderingDropdownPage />} />
         <Route path="*" element={<h2 className="text-center">Not found</h2>} />
       </Routes>

dev/navigation/NavPillsPage.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useState } from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router';
 import { NavPillItem, NavPills, ToggleSwitch } from '../../src';
 
 export const NavPillsPage: FC = () => {
@@ -10,15 +10,15 @@ export const NavPillsPage: FC = () => {
     <>
       <ToggleSwitch checked={fill} onChange={setFill}>Fill</ToggleSwitch>
       <NavPills className="mb-3" fill={fill}>
-        <NavPillItem to="foo">Foo</NavPillItem>
-        <NavPillItem to="bar">Bar</NavPillItem>
-        <NavPillItem to="baz">Baz</NavPillItem>
+        <NavPillItem to="../foo">Foo</NavPillItem>
+        <NavPillItem to="../bar">Bar</NavPillItem>
+        <NavPillItem to="../baz">Baz</NavPillItem>
       </NavPills>
       <Routes>
         <Route path="foo" element={<h3 className="text-center">This is option foo</h3>} />
         <Route path="bar" element={<h3 className="text-center">This is option bar</h3>} />
         <Route path="baz" element={<h3 className="text-center">This is option baz</h3>} />
-        <Route path="*" element={<Navigate replace to="foo" />} />
+        <Route path="*" element={<Navigate replace to="../foo" />} />
       </Routes>
     </>
   );

package.json

@@ -32,7 +32,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.2",
+    "react-router": "^7.0.2",
     "reactstrap": "^9.2.0"
   },
   "devDependencies": {

src/hooks/index.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { parseQueryString } from '../utils';
 
 type ToggleResult = [boolean, () => void, () => void, () => void];

src/navigation/NavPills.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import { Children, isValidElement } from 'react';
-import { NavLink as RouterNavLink } from 'react-router-dom';
+import { NavLink as RouterNavLink } from 'react-router';
 import { Card, Nav, NavItem, NavLink } from 'reactstrap';
 import './NavPills.scss';
 

test/hooks/index.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import { Router } from 'react-router';
 import { useParsedQuery, useTimeoutToggle } from '../../src';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 

test/navigation/NavPills.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { NavPillItem, NavPills } from '../../src';
 import { checkAccessibility } from '../__helpers__/accessibility';