Polaris-react: Navigation always reload page

[thieuanh1995hn]

Hello guys. Can you help me with the navigation.

• The original way to setup a item in navigation is

{    
      label: "Shipments",
      icon: ShipmentMajorMonotone,
      url: "/shipments",
      selected: location.pathname.trim() === "/shipments",
    }

• With above way when click shipments on navigation it's always reload page so i change to my way

    {
      label: "Shipments",
      icon: ShipmentMajorMonotone,
      url: "javascript:void(0)",
      selected: location.pathname.trim() === "/shipments",
      onClick: () => history.push('/shipments')
    }

It did not reload page but show some warning . Can some way equal to do by original way ?

[probot-shopify[bot]]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[chloerice]

Hi @thieuanh1995hn, thanks for raising this. Is this happening within an embedded app (using AppBridge), or are you working on a stand-alone app (one that is not embedded within an iframe in the Shopify Admin)?

If your app is embedded, the info in this related issue may help.

[thieuanh1995hn]

@chloerice it's just normal react website using Polaris. It has not related to Shopify App but it will. I did fixed it by second way i provided but i think it's not original way Polaris want us to do.

[BPScott]

@thieuanh1995hn what router are you using? react-router?

It sounds like you need to go and set the linkComponent prop on your AppProvider to be a component that uses your router's link component. This will make any internal links use the react-router link component instead of an a tag, and thus you'll get js-based navigation instead of refreshing the page.

(the following code is copied from an internal project and modified but I haven't ran it exactly yet)

import {Link as ReactRouterLink} from 'react-router-dom';
import {AppProvider} from '@shopify/polaris';
import translations from '@shopify/polaris/locales/en.json';

function MyApp({children}) {
    return (
        <AppProvider i18n={translations} linkComponent={Link}>
            {children}
        </AppProvider>
    );
}

function Link({children, url = '', ...rest}) {
  // Use an regular a tag for external and download links
  if (isOutboundLink(url) || rest.download) {
    return (
      <a href={url} {...rest}>
        {children}
      </a>
    );
  }

  return (
    <ReactRouterLink to={url} {...rest}>
      {children}
    </ReactRouterLink>
  );
}

function isOutboundLink(url: string) {
  return /^(?:[a-z][a-z\d+.-]*:|\/\/)/.test(url);
}

[probot-shopify[bot]]

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.