diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 480cdf0529f9e..1a6f00298b42f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2951,8 +2951,8 @@ importers: specifier: 18.3.1 version: 18.3.1(react@18.3.1) react-router-dom: - specifier: ^5.3.4 - version: 5.3.4(react@18.3.1) + specifier: 6.28.0 + version: 6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) tus-js-client: specifier: 4.1.0 version: 4.1.0 @@ -6750,6 +6750,10 @@ packages: resolution: {integrity: sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==} engines: {node: '>=14'} + '@remix-run/router@1.21.0': + resolution: {integrity: sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==} + engines: {node: '>=14.0.0'} + '@remix-run/router@1.5.0': resolution: {integrity: sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==} engines: {node: '>=14'} @@ -12959,6 +12963,13 @@ packages: react: '>=16.8' react-dom: '>=16.8' + react-router-dom@6.28.0: + resolution: {integrity: sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + react-router-dom@6.6.2: resolution: {integrity: sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==} engines: {node: '>=14'} @@ -12994,6 +13005,12 @@ packages: peerDependencies: react: '>=16.8' + react-router@6.28.0: + resolution: {integrity: sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react-router@6.6.2: resolution: {integrity: sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==} engines: {node: '>=14'} @@ -17026,6 +17043,8 @@ snapshots: '@remix-run/router@1.2.1': {} + '@remix-run/router@1.21.0': {} + '@remix-run/router@1.5.0': {} '@remix-run/router@1.7.1': {} @@ -26271,6 +26290,13 @@ snapshots: react-dom: 18.3.1(react@18.3.1) react-router: 6.21.0(react@18.3.1) + react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@remix-run/router': 1.21.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-router: 6.28.0(react@18.3.1) + react-router-dom@6.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@remix-run/router': 1.2.1 @@ -26311,6 +26337,11 @@ snapshots: '@remix-run/router': 1.14.0 react: 18.3.1 + react-router@6.28.0(react@18.3.1): + dependencies: + '@remix-run/router': 1.21.0 + react: 18.3.1 + react-router@6.6.2(react@18.3.1): dependencies: '@remix-run/router': 1.2.1 diff --git a/projects/packages/videopress/changelog/update-videopress-pkg-react-dom-router_v5_to_v6 b/projects/packages/videopress/changelog/update-videopress-pkg-react-dom-router_v5_to_v6 new file mode 100644 index 0000000000000..13cbf3392f78d --- /dev/null +++ b/projects/packages/videopress/changelog/update-videopress-pkg-react-dom-router_v5_to_v6 @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated dependencies. diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json index 0379e51d3947b..b18f709130bb6 100644 --- a/projects/packages/videopress/package.json +++ b/projects/packages/videopress/package.json @@ -85,7 +85,7 @@ "filesize": "8.0.6", "react": "18.3.1", "react-dom": "18.3.1", - "react-router-dom": "^5.3.4", + "react-router-dom": "6.28.0", "tus-js-client": "4.1.0" } } diff --git a/projects/packages/videopress/src/client/admin/components/admin-page/libraries.tsx b/projects/packages/videopress/src/client/admin/components/admin-page/libraries.tsx index adfb95ad11e0a..a80bb2b3c40f6 100644 --- a/projects/packages/videopress/src/client/admin/components/admin-page/libraries.tsx +++ b/projects/packages/videopress/src/client/admin/components/admin-page/libraries.tsx @@ -7,7 +7,7 @@ import { __, sprintf } from '@wordpress/i18n'; import { grid, formatListBullets } from '@wordpress/icons'; import clsx from 'clsx'; import React, { useState } from 'react'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; /** * Internal dependencies */ @@ -122,7 +122,7 @@ const VideoLibraryWrapper = ( { }; export const VideoPressLibrary = ( { videos, totalVideos, loading }: VideoLibraryProps ) => { - const history = useHistory(); + const navigate = useNavigate(); const { search } = useVideos(); const videosToDisplay = [ // First comes video upload errors @@ -152,7 +152,7 @@ export const VideoPressLibrary = ( { videos, totalVideos, loading }: VideoLibrar }; const handleClickEditDetails = video => { - history.push( `/video/${ video?.id }/edit` ); + navigate( `/video/${ video?.id }/edit` ); }; const library = diff --git a/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx b/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx index 4007752525353..10bca668b797a 100644 --- a/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx +++ b/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx @@ -22,7 +22,7 @@ import { } from '@wordpress/icons'; import clsx from 'clsx'; import { useEffect } from 'react'; -import { useHistory, Prompt, Link } from 'react-router-dom'; +import { useNavigate, Link } from 'react-router-dom'; /** * Internal dependencies */ @@ -69,11 +69,11 @@ const Header = ( { videoId: string | number; } ) => { const [ isSm ] = useBreakpointMatch( 'sm' ); - const history = useHistory(); + const navigate = useNavigate(); return (
-
@@ -237,18 +237,18 @@ const EditVideoDetails = () => { message: unsavedChangesMessage, } ); - const history = useHistory(); + const navigate = useNavigate(); const { page } = useVideosQuery(); useEffect( () => { if ( deleted === true ) { const to = page > 1 ? `/?page=${ page }` : '/'; - history.push( to ); + navigate( to ); } }, [ deleted ] ); if ( ! canPerformAction ) { - history.push( '/' ); + navigate( '/' ); } let thumbnail: string | React.JSX.Element = posterImage; @@ -268,7 +268,9 @@ const EditVideoDetails = () => { return ( <> - + { /* This is no longer supported as of react-router-dom v6: https://github.com/remix-run/react-router/issues/8139 + + */ } { frameSelectorIsOpen && ( { }; export default () => { - const history = useHistory(); + const navigate = useNavigate(); const dispatch = useDispatch( STORE_ID ); const { isRegistered } = useConnection(); if ( ! isRegistered ) { - history.push( '/' ); + navigate( '/' ); } const { videoId: videoIdFromParams } = useParams(); diff --git a/projects/packages/videopress/src/client/admin/hooks/use-search-params/index.ts b/projects/packages/videopress/src/client/admin/hooks/use-search-params/index.ts index 346c4b81df69c..8a236ce353c58 100644 --- a/projects/packages/videopress/src/client/admin/hooks/use-search-params/index.ts +++ b/projects/packages/videopress/src/client/admin/hooks/use-search-params/index.ts @@ -1,13 +1,13 @@ /** * External dependencies */ -import { useLocation, useHistory } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; type SearchParamNameProp = 'page' | 'q'; export const useSearchParams = () => { const location = useLocation(); - const history = useHistory(); + const navigate = useNavigate(); const searchParams = new URLSearchParams( location.search ); /** @@ -46,8 +46,8 @@ export const useSearchParams = () => { */ const update = () => { const searchFragment = '?' + searchParams.toString(); - if ( searchFragment !== history.location.search ) { - history.push( { + if ( searchFragment !== location.search ) { + navigate( { search: searchFragment, } ); } @@ -57,11 +57,14 @@ export const useSearchParams = () => { * Force an empty query string. */ const reset = () => { - if ( '' !== history.location.search ) { - history.replace( { - pathname: history.location.pathname, - search: '', - } ); + if ( '' !== location.search ) { + navigate( + { + pathname: location.pathname, + search: '', + }, + { replace: true } + ); } }; diff --git a/projects/packages/videopress/src/client/admin/index.js b/projects/packages/videopress/src/client/admin/index.js index e6d5735744add..e8f02b0a7fd8c 100644 --- a/projects/packages/videopress/src/client/admin/index.js +++ b/projects/packages/videopress/src/client/admin/index.js @@ -5,7 +5,7 @@ import { ThemeProvider } from '@automattic/jetpack-components'; import * as WPElement from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { useEffect } from 'react'; -import { HashRouter, Switch, Route, useLocation } from 'react-router-dom'; +import { HashRouter, Routes, Route, useLocation } from 'react-router-dom'; /** * Internal dependencies */ @@ -50,14 +50,10 @@ const VideoPress = () => { - - - - - - - - + + } /> + } /> + );