Need Help with implementing Link component when customizing image widget

[JohnnySun]

I'm working on customizing image component. Currently, when the cursor hovers over image widgets, the link details are revealed at the bottom left/right corner of the browser. I'm trying to implement a mechanism to hide link details from being displayed in the browser's corner upon hover.

Initially, this widget used a <Link> component to handle navigation, which worked fine. However, I needed to modify its behavior to dynamically construct URLs based on some configuration and then navigate to those URLs without reloading the entire page.

Original Code Snippet:

renderResult = (
  <div className='widget-image-container jimu-widget'>
    <Link to={linkTo} target={target} queryObject={queryObject}>
      {imageContent}
    </Link>
  </div>
);

Modified Code Snippet: I replaced the <Link> with a <div> and added an onClick handler to programmatically navigate to URLs. For web addresses, I use window.open(linkTo.value, target); and for other link types, I construct the URL based on some configuration.

renderResult = (
  <div className='widget-image-container jimu-widget'>
    <div 
      onClick={() => {
        if (linkTo.linkType === LinkType.WebAddress) {
          window.open(linkTo.value, target);
        } else {
          constructURLWithConfig();
        }
      }}
      style={{ cursor: 'pointer' }}
    >
      {imageContent}
    </div>
  </div>
);

function constructURLWithConfig() {
  const config = getAppStore().getState().appConfig;
  let [pageId, viewId] = linkTo.value.split(',');

  let pageLabel = config.pages[pageId] ? config.pages[pageId].label : null;
  let viewLabel = config.views[viewId] ? config.views[viewId].label : null;

  pageLabel = pageLabel ? pageLabel.replace(/\s+/g, '-') : pageLabel;
  viewLabel = viewLabel ? viewLabel.replace(/\s+/g, '-') : viewLabel;

  const currentBaseURL = window.location.origin + window.location.pathname;
  const queryString = `?page=${encodeURIComponent(pageLabel)}&views=${encodeURIComponent(viewLabel)}`;

  const finalURL = currentBaseURL + queryString;

  window.open(finalURL, '_self'); // This is supposed to perform the redirect
}

Problem: It causes a full page reload rather than updating just a specific area or behaving like an SPA navigation.

Question:

• Is there a way to update the current view without reloading the whole page, similar to how SPA routing works?
• Or is there a better approach to achieve dynamic URL navigation without causing a full page reload in this context?

Any suggestions or insights into how to address this problem would be greatly appreciated. I'm looking for a solution that allows for link hiding while maintaining SPA-like behavior without full page reloads.