Extract the Router APIs and context into a dedicated package

docs/manifest.json

@@ -1823,6 +1823,12 @@
 		"markdown_source": "../packages/rich-text/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/router",
+		"slug": "packages-router",
+		"markdown_source": "../packages/router/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/scripts",
 		"slug": "packages-scripts",

package.json

@@ -76,6 +76,7 @@
 		"@wordpress/redux-routine": "file:packages/redux-routine",
 		"@wordpress/reusable-blocks": "file:packages/reusable-blocks",
 		"@wordpress/rich-text": "file:packages/rich-text",
+		"@wordpress/router": "file:packages/router",
 		"@wordpress/server-side-render": "file:packages/server-side-render",
 		"@wordpress/shortcode": "file:packages/shortcode",
 		"@wordpress/style-engine": "file:packages/style-engine",

packages/edit-site/package.json

@@ -54,6 +54,7 @@
 		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
+		"@wordpress/router": "file:../router",
 		"@wordpress/style-engine": "file:../style-engine",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
@@ -62,7 +63,6 @@
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
 		"fast-deep-equal": "^3.1.3",
-		"history": "^5.1.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",

packages/edit-site/src/components/add-new-template/new-template-part.js

@@ -8,17 +8,20 @@ import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { plus } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useHistory } from '../routes';
 import CreateTemplatePartModal from '../create-template-part-modal';
 import {
 	useExistingTemplateParts,
 	getUniqueTemplatePartTitle,
 	getCleanTemplatePartSlug,
 } from '../../utils/template-part-create';
+import { unlock } from '../../private-apis';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function NewTemplatePart( {
 	postType,

packages/edit-site/src/components/add-new-template/new-template.js

@@ -31,6 +31,7 @@ import {
 } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -46,10 +47,11 @@ import {
 } from './utils';
 import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
-import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
 
+const { useHistory } = unlock( routerPrivateApis );
+
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
 	'home',

packages/edit-site/src/components/app/index.js

@@ -8,13 +8,16 @@ import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { Routes } from '../routes';
 import Layout from '../layout';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
+import { unlock } from '../../private-apis';
+
+const { RouterProvider } = unlock( routerPrivateApis );
 
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -37,10 +40,10 @@ export default function App() {
 				<GlobalStylesProvider>
 					<Popover.Slot />
 					<UnsavedChangesWarning />
-					<Routes>
+					<RouterProvider>
 						<Layout />
 						<PluginArea onError={ onPluginAreaError } />
-					</Routes>
+					</RouterProvider>
 				</GlobalStylesProvider>
 			</SlotFillProvider>
 		</ShortcutProvider>

packages/edit-site/src/components/block-editor/back-button.js

@@ -4,11 +4,14 @@
 import { Button } from '@wordpress/components';
 import { arrowLeft } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useLocation, useHistory } from '../routes';
+import { unlock } from '../../private-apis';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 function BackButton() {
 	const location = useLocation();

packages/edit-site/src/components/layout/index.js

@@ -24,6 +24,7 @@ import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { CommandMenu } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -33,7 +34,6 @@ import Editor from '../editor';
 import ListPage from '../list';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
@@ -46,6 +46,8 @@ import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
 import { useCommands } from '../../hooks/commands';
 
+const { useLocation } = unlock( routerPrivateApis );
+
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
 	position: undefined,

packages/edit-site/src/components/list/index.js

@@ -7,15 +7,18 @@ import { InterfaceSkeleton } from '@wordpress/interface';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { EditorSnackbars } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import useRegisterShortcuts from './use-register-shortcuts';
 import Header from './header';
 import Table from './table';
-import { useLocation } from '../routes';
 import useTitle from '../routes/use-title';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function List() {
 	const {

packages/edit-site/src/components/routes/link.js

@@ -2,11 +2,14 @@
  * WordPress dependencies
  */
 import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useHistory } from './index';
+import { unlock } from '../../private-apis';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 export function useLink( params = {}, state, shouldReplace = false ) {
 	const history = useHistory();

packages/edit-site/src/components/routes/use-title.js

@@ -7,11 +7,14 @@ import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useLocation } from './index';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function useTitle( title ) {
 	const location = useLocation();

packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -7,17 +7,19 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { useHistory } from '../routes';
 import NavigationMenuContent from './navigation-menu-content';
 import { NavigationMenuLoader } from './loader';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 
+const { useHistory } = unlock( routerPrivateApis );
+
 const noop = () => {};
 const NAVIGATION_MENUS_QUERY = {
 	per_page: 1,

packages/edit-site/src/components/sidebar/index.js

@@ -6,6 +6,7 @@ import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -21,7 +22,9 @@ import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-gl
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveHub from '../save-hub';
 import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
-import { useLocation } from '../routes';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 function SidebarScreens() {
 	useSyncPathWithURL();

packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -4,12 +4,15 @@
 import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function useInitEditedEntityFromURL() {
 	const { params: { postId, postType } = {} } = useLocation();

packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -3,14 +3,16 @@
  */
 import { useEffect, useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { useLocation, useHistory } from '../routes';
 import { unlock } from '../../private-apis';
 
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
 export default function useSyncCanvasModeWithURL() {
 	const history = useHistory();
 	const { params } = useLocation();

packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js

@@ -3,11 +3,14 @@
  */
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { useEffect, useRef } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useLocation, useHistory } from '../routes';
+import { unlock } from '../../private-apis';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export function getPathFromURL( urlParams ) {
 	let path = urlParams?.path ?? '/';

packages/edit-site/src/components/template-details/template-areas.js

@@ -7,14 +7,17 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { moreVertical } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import { useLocation } from '../routes';
 import { useLink } from '../routes/link';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 function TemplatePartItemMore( {
 	onClose,

packages/edit-site/src/hooks/commands/use-navigation-commands.js

@@ -7,15 +7,16 @@ import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { post, page, layout, symbolFilled } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
-import { useHistory } from '../../components/routes';
 
 const { useCommandLoader } = unlock( privateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 const icons = {
 	post,