Merge pull request #117 from collective/fix-routing-with-hash

fix routing if its done with changing the hash
collective · Jul 26, 2024 · 7db3c96 · 7db3c96
2 parents ac4d446 + ea49d4d
commit 7db3c96
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/packages/hydra-js/hydra.js b/packages/hydra-js/hydra.js
@@ -36,14 +36,21 @@ class Bridge {
  const newUrl = new URL(e.destination.url);
  if (
  this.currentUrl === null ||
+ newUrl.hash !== this.currentUrl.hash ||
  (this.currentUrl.pathname !== newUrl.pathname &&
  this.currentUrl.origin === newUrl.origin)
  ) {
- this.currentUrl = newUrl;
  window.parent.postMessage(
- { type: 'URL_CHANGE', url: e.destination.url },
+ {
+ type: 'URL_CHANGE',
+ url: newUrl.href,
+ isRoutingWithHash:
+ newUrl.hash !== this.currentUrl?.hash &&
+ newUrl.hash.startsWith('#!'),
+ },
  this.adminOrigin,
  );
+ this.currentUrl = newUrl;
  } else if (
  this.currentUrl !== null &&
  this.currentUrl.origin !== newUrl.origin

diff --git a/packages/volto-hydra/src/components/Iframe/View.jsx b/packages/volto-hydra/src/components/Iframe/View.jsx
@@ -135,18 +135,26 @@ const Iframe = (props) => {
  onChangeFormData(newFormData);
  };
  //---------------------------
-
+ /**
+ * Handle the navigation to a new URL
+ * @param {URL} givenUrlObject
+ * @param {Boolean} isRoutingWithHash
+ */
  const handleNavigateToUrl = useCallback(
- (givenUrl = null) => {
- if (!isValidUrl(givenUrl)) {
+ (givenUrlObject, isRoutingWithHash) => {
+ if (!isValidUrl(givenUrlObject.href)) {
  return;
  }
  // Update adminUI URL with the new URL
- const formattedUrl = new URL(givenUrl);
- const newOrigin = formattedUrl.origin;
+ const newOrigin = givenUrlObject.origin;
  Cookies.set('iframe_url', newOrigin, { expires: 7 });
-
- history.push(`${formattedUrl.pathname}`);
+ const hash = givenUrlObject.hash;
+ if (isRoutingWithHash) {
+ const pathname = hash.replace('#!', '');
+ history.push(`${pathname}`);
+ } else {
+ history.push(`${givenUrlObject.pathname}`);
+ }
  },
  [history],
  );
@@ -176,7 +184,10 @@ const Iframe = (props) => {
  const { type } = event.data;
  switch (type) {
  case 'URL_CHANGE': // URL change from the iframe
- handleNavigateToUrl(event.data.url);
+ handleNavigateToUrl(
+ new URL(event.data.url),
+ event.data.isRoutingWithHash,
+ );
  break;
 
  case 'OPEN_SETTINGS':