Shopify Polaris Navigation url refreshes th page, thus causes flickering

Nishant Joshi 0
Viewed 35

I am trying to make a Navigation using shopify polaris library in nextjs.

items={[{    
      label: "Shipments",
      icon: ShipmentMajorMonotone,
      url: "/shipments",
 }]}

After clicking any link in the <Navigation/>, it triggers a full reload.

The "url" part causes the page to reload resulting into a flickering effect. I've followed this solution but the issue persists.

I've also tried using next/router methods. It surely behaves smoothly sometimes but doesn't solve the issue completely.

next-router polaris shopify next.js
1 Answers

I've found a solution. This one helped me a lot. But as it was in typescript, i'll explain in JS.

The issue is with how polaris has its url:"/demo" type of urls. In components such as Navigation, we cannot use router or Link (from next/link) which prevents page reload.

Polaris converts its url:"/demo" into <a> tags. We need to wrap those <a> tags with <Link> on the go.

To achieve this, we add linkComponent in <AppProvider> such as <AppProvider linkComponent={LinkWrapper}>. Here, all the link components will be sent to our custom LinkWrapper method.

The overall code looks like this:

import { useRouter } from "next/router";
import { AppProvider, Navigation } from "@shopify/polaris";
import Link from "next/link";
export default function DraftOrderNav() {
const router = useRouter();


//method which wraps <Link> around <a> 
function LinkWrapper({ children, url, ...rest }) {     
  return (
    <Link href={url} passHref as={url}>
      <a {...rest}>{children}</a>
    </Link>
  );
}
return (
<>
  //Wrap this around your polaris component
  <AppProvider linkComponent={LinkWrapper}> 
    <Navigation location={router.pathname}>
      <Navigation.Section
        items={[
          {
            url: "/DraftOrderReport/draft-order-report",
            .....
Nishant Joshi0
Related