@cloudflare/component-page 10.1.13 → 10.1.15

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 10.1.15
+
+### Patch Changes
+
+- 21e3904266: Get location from useLocation instead of useHistory
+
+## 10.1.14
+
+### Patch Changes
+
+- @cloudflare/component-link@9.0.30
+
 ## 10.1.13
 
 ### Patch Changes

package/es/Page.js

@@ -7,7 +7,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import React, { useEffect, useRef } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { createStyledComponent } from '@cloudflare/style-container';
 import { Main, Header, Div, P, Span } from '@cloudflare/elements';
 import { Label } from '@cloudflare/component-label';
@@ -139,8 +139,6 @@ var focus = function focus(el) {
 };
 
 var Page = _ref2 => {
-  var _history$location;
-
   var {
     title,
     parentPageLabel,
@@ -165,9 +163,9 @@ var Page = _ref2 => {
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded);
 
-  var history = useHistory();
+  var location = useLocation();
   var skipTargetRef = useRef(null);
-  var path = history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : _history$location.pathname;
+  var path = location === null || location === void 0 ? void 0 : location.pathname;
   useEffect(() => {
     // If autofocus is enabled, then focus will move to the title block when
     // the page is navigated to (but not when the dash is first loaded)

package/lib/Page.js

@@ -164,8 +164,6 @@ var focus = function focus(el) {
 };
 
 var Page = function Page(_ref2) {
-  var _history$location;
-
   var title = _ref2.title,
       parentPageLabel = _ref2.parentPageLabel,
       description = _ref2.description,
@@ -191,9 +189,9 @@ var Page = function Page(_ref2) {
       documentationAsButton = _ref2.documentationAsButton,
       props = _objectWithoutProperties(_ref2, _excluded);
 
-  var history = (0, _reactRouterDom.useHistory)();
+  var location = (0, _reactRouterDom.useLocation)();
   var skipTargetRef = (0, _react.useRef)(null);
-  var path = history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : _history$location.pathname;
+  var path = location === null || location === void 0 ? void 0 : location.pathname;
   (0, _react.useEffect)(function () {
     // If autofocus is enabled, then focus will move to the title block when
     // the page is navigated to (but not when the dash is first loaded)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-page",
   "description": "Cloudflare Page Component",
-  "version": "10.1.13",
+  "version": "10.1.15",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@cloudflare/component-label": "^6.0.4",
-    "@cloudflare/component-link": "^9.0.29",
+    "@cloudflare/component-link": "^9.0.30",
     "@cloudflare/elements": "^4.0.4",
     "@cloudflare/intl-react": "^1.9.80"
   },

package/src/Page.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { createStyledComponent } from '@cloudflare/style-container';
 import { Main, Header, Div, P, Span } from '@cloudflare/elements';
 import { Label } from '@cloudflare/component-label';
@@ -214,9 +214,9 @@ const Page = ({
   documentationAsButton,
   ...props
 }: Props) => {
-  const history = useHistory();
+  const location = useLocation();
   const skipTargetRef = useRef<HTMLAnchorElement>(null);
-  const path = history?.location?.pathname;
+  const path = location?.pathname;
 
   useEffect(() => {
     // If autofocus is enabled, then focus will move to the title block when