Skip to content

Commit cc13e1f

Browse files
acelayaacelaya
committed
Update to react-router 7
1 parent 297dae4 commit cc13e1f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+160
-114
lines changed

‎CHANGELOG.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
44

55
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).
66

7+
## [0.11.0] - 2024-12-05
8+
### Added
9+
* *Nothing*
10+
11+
### Changed
12+
* Update to react-router 7.
13+
14+
### Deprecated
15+
* *Nothing*
16+
17+
### Removed
18+
* Remove support for react-router 6.
19+
20+
### Fixed
21+
* *Nothing*
22+
23+
724
## [0.11.0] - 2024-11-30
825
### Added
926
* [#491](https://github.com/shlinkio/shlink-web-component/issues/491) Add support for colors in QR code configurator.

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,13 +81,13 @@ export function App() {
8181

8282
### Routes prefix
8383

84-
Sections are handled via client-side routing with `react-router-dom`. `ShlinkWebComponent` will add its own `<BrowserRouter />` unless already rendered inside a router.
84+
Sections are handled via client-side routing with `react-router`. `ShlinkWebComponent` will add its own `<BrowserRouter />` unless already rendered inside a router.
8585

8686
If you render it inside a router, make sure you pass the prefix for all routes handled by this component.
8787

8888
```tsx
8989
import { ShlinkWebComponent } from '@shlinkio/shlink-web-component';
90-
import { BrowserRouter, Routes, Route } from 'react-router-dom';
90+
import { BrowserRouter, Routes, Route } from 'react-router';
9191

9292
export function App() {
9393
return (

‎dev/App.tsx

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { FetchHttpClient } from '@shlinkio/shlink-js-sdk/browser';
33
import type { FC } from 'react';
44
import { useCallback } from 'react';
55
import { useEffect, useMemo, useState } from 'react';
6-
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
6+
import { BrowserRouter, Link, Navigate, Route, Routes } from 'react-router';
77
import { ShlinkWebComponent } from '../src';
88
import type { Settings } from '../src/settings';
99
import { ShlinkWebSettings } from '../src/settings';
@@ -50,18 +50,21 @@ export const App: FC = () => {
5050
</header>
5151
<div className="wrapper">
5252
<Routes>
53-
<Route
54-
path="/settings/*"
55-
element={(
56-
<div className="container pt-4">
57-
<ShlinkWebSettings
58-
settings={settings}
59-
updateSettings={setSettings}
60-
defaultShortUrlsListOrdering={{}}
61-
/>
62-
</div>
63-
)}
64-
/>
53+
<Route path="/settings">
54+
<Route
55+
path="*"
56+
element={(
57+
<div className="container pt-4">
58+
<ShlinkWebSettings
59+
settings={settings}
60+
updateSettings={setSettings}
61+
defaultShortUrlsListOrdering={{}}
62+
/>
63+
</div>
64+
)}
65+
/>
66+
<Route path="" element={<Navigate replace to="general" />} />
67+
</Route>
6568
<Route
6669
path={routesPrefix ? `${routesPrefix}*` : '*'}
6770
element={apiClient && serverVersion ? (

‎package-lock.json

Lines changed: 53 additions & 37 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@
4646
"@fortawesome/free-solid-svg-icons": "^6.4.2",
4747
"@fortawesome/react-fontawesome": "^0.2.0",
4848
"@reduxjs/toolkit": "^2.0.1",
49-
"@shlinkio/shlink-frontend-kit": "^0.6.0",
49+
"@shlinkio/shlink-frontend-kit": "^0.7.0",
5050
"@shlinkio/shlink-js-sdk": "^1.3.0",
5151
"react": "^18.2.0",
5252
"react-dom": "^18.2.0",
5353
"react-redux": "^9.0.1",
54-
"react-router-dom": "^6.20.1",
54+
"react-router": "^7.0.2",
5555
"reactstrap": "^9.2.0"
5656
},
5757
"peerDependenciesMeta": {

‎src/Main.tsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useToggle } from '@shlinkio/shlink-frontend-kit';
44
import { clsx } from 'clsx';
55
import type { FC, ReactNode } from 'react';
66
import { useEffect } from 'react';
7-
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
7+
import { Navigate, Route, Routes, useLocation } from 'react-router';
88
import { AsideMenu } from './common/AsideMenu';
99
import type { FCWithDeps } from './container/utils';
1010
import { componentFactory, useDependencies } from './container/utils';
@@ -79,17 +79,27 @@ const Main: FCWithDeps<MainProps, MainDeps> = ({ createNotFound }) => {
7979
<Route path="/overview" element={<Overview />} />
8080
<Route path="/list-short-urls/:page" element={<ShortUrlsList />} />
8181
<Route path="/create-short-url" element={<CreateShortUrl />} />
82-
<Route path="/short-code/:shortCode/visits/*" element={<ShortUrlVisits />} />
82+
<Route path="/short-code/:shortCode/visits">
83+
{['', '*'].map((path) => <Route key={path} path={path} element={<ShortUrlVisits />} />)}
84+
</Route>
8385
<Route path="/short-code/:shortCode/edit" element={<EditShortUrl />} />
8486
{supportsRedirectRules && (
8587
<Route path="/short-code/:shortCode/redirect-rules" element={<ShortUrlRedirectRules />} />
8688
)}
8789
<Route path="/short-urls/compare-visits" element={<ShortUrlVisitsComparison />} />
88-
<Route path="/tag/:tag/visits/*" element={<TagVisits />} />
90+
<Route path="/tag/:tag/visits">
91+
{['', '*'].map((path) => <Route key={path} path={path} element={<TagVisits />} />)}
92+
</Route>
8993
<Route path="/tags/compare-visits" element={<TagVisitsComparison />} />
90-
<Route path="/domain/:domain/visits/*" element={<DomainVisits />} />
91-
<Route path="/orphan-visits/*" element={<OrphanVisits />} />
92-
<Route path="/non-orphan-visits/*" element={<NonOrphanVisits />} />
94+
<Route path="/domain/:domain/visits">
95+
{['', '*'].map((path) => <Route key={path} path={path} element={<DomainVisits />} />)}
96+
</Route>
97+
<Route path="/orphan-visits">
98+
{['', '*'].map((path) => <Route key={path} path={path} element={<OrphanVisits />} />)}
99+
</Route>
100+
<Route path="/non-orphan-visits">
101+
{['', '*'].map((path) => <Route key={path} path={path} element={<NonOrphanVisits />} />)}
102+
</Route>
93103
<Route path="/manage-tags" element={<TagsList />} />
94104
<Route path="/manage-domains" element={<ManageDomains />} />
95105
<Route path="/domains/compare-visits" element={<DomainVisitsComparison />} />

‎src/ShlinkWebComponent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type Bottle from 'bottlejs';
33
import type { FC, ReactNode } from 'react';
44
import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
55
import { Provider as ReduxStoreProvider } from 'react-redux';
6-
import { BrowserRouter, useInRouterContext } from 'react-router-dom';
6+
import { BrowserRouter, useInRouterContext } from 'react-router';
77
import type { ShlinkApiClient } from './api-contract';
88
import type { Settings } from './settings';
99
import { SettingsProvider } from './settings';

‎src/common/AsideMenu.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {
88
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
99
import { clsx } from 'clsx';
1010
import type { FC } from 'react';
11-
import type { NavLinkProps } from 'react-router-dom';
12-
import { NavLink, useLocation } from 'react-router-dom';
11+
import type { NavLinkProps } from 'react-router';
12+
import { NavLink, useLocation } from 'react-router';
1313
import './AsideMenu.scss';
1414

1515
export interface AsideMenuProps {

‎src/domains/helpers/DomainDropdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
88
import { RowDropdownBtn, useToggle } from '@shlinkio/shlink-frontend-kit';
99
import type { FC } from 'react';
10-
import { Link } from 'react-router-dom';
10+
import { Link } from 'react-router';
1111
import { DropdownItem } from 'reactstrap';
1212
import { useFeature } from '../../utils/features';
1313
import { useRoutesPrefix } from '../../utils/routesPrefix';

‎src/mercure/helpers/boundToMercureHub.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { FC } from 'react';
22
import { useEffect } from 'react';
3-
import { useParams } from 'react-router-dom';
3+
import { useParams } from 'react-router';
44
import type { CreateVisit } from '../../visits/types';
55
import type { MercureInfo } from '../reducers/mercureInfo';
66
import { bindToMercureTopic } from './index';

‎src/overview/Overview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { FC, ReactNode } from 'react';
22
import { useEffect } from 'react';
3-
import { Link, useNavigate } from 'react-router-dom';
3+
import { Link, useNavigate } from 'react-router';
44
import { Card, CardBody, CardHeader, Row } from 'reactstrap';
55
import type { ShlinkShortUrlsListParams } from '../api-contract';
66
import type { FCWithDeps } from '../container/utils';

‎src/overview/helpers/HighlightCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { faArrowAltCircleRight as linkIcon } from '@fortawesome/free-regular-svg
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
33
import { useElementRef } from '@shlinkio/shlink-frontend-kit';
44
import type { FC, PropsWithChildren, ReactNode } from 'react';
5-
import { Link } from 'react-router-dom';
5+
import { Link } from 'react-router';
66
import { Card, CardText, CardTitle, UncontrolledTooltip } from 'reactstrap';
77
import './HighlightCard.scss';
88

‎src/settings/components/ShlinkWebSettings.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NavPillItem, NavPills } from '@shlinkio/shlink-frontend-kit';
33
import type { FC, PropsWithChildren } from 'react';
44
import { Children } from 'react';
55
import { useCallback } from 'react';
6-
import { Navigate, Route, Routes } from 'react-router-dom';
6+
import { Navigate, Route, Routes } from 'react-router';
77
import type { DeepPartial } from '../../utils/types';
88
import { SettingsProvider } from '..';
99
import type { RealTimeUpdatesSettings, Settings, ShortUrlsListSettings } from '../types';
@@ -48,9 +48,9 @@ export const ShlinkWebSettings: FC<ShlinkWebSettingsProps> = (
4848
return (
4949
<SettingsProvider value={settings}>
5050
<NavPills className="mb-3">
51-
<NavPillItem to="general">General</NavPillItem>
52-
<NavPillItem to="short-urls">Short URLs</NavPillItem>
53-
<NavPillItem to="other-items">Other items</NavPillItem>
51+
<NavPillItem to="../general">General</NavPillItem>
52+
<NavPillItem to="../short-urls">Short URLs</NavPillItem>
53+
<NavPillItem to="../other-items">Other items</NavPillItem>
5454
</NavPills>
5555

5656
<Routes>
@@ -87,7 +87,7 @@ export const ShlinkWebSettings: FC<ShlinkWebSettingsProps> = (
8787
</SettingsSections>
8888
)}
8989
/>
90-
<Route path="*" element={<Navigate replace to="general" />} />
90+
<Route path="*" element={<Navigate replace to="../general" />} />
9191
</Routes>
9292
</SettingsProvider>
9393
);

‎src/short-urls/Paginator.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link } from 'react-router-dom';
1+
import { Link } from 'react-router';
22
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
33
import type { ShlinkPaginator } from '../api-contract';
44
import type {

0 commit comments

Comments
 (0)