共享北极星导航url刷新页面，从而导致闪烁

Question

我试图在nextjs中使用shopify polaris库进行导航。

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

单击<Navigation/>中的任何链接后，它将触发一个完整的重新加载。

"url“部分会导致页面重新加载，从而产生闪烁效果。我跟踪了这个解决方案，但问题依然存在。

我还尝试过使用next/路由器方法。它有时确实表现得很顺利，但并不能完全解决问题。

Answer 1

我找到了解决办法。这一个帮了我很多。但就像在打字稿里一样，我会用JS来解释。

问题在于北极星如何拥有它的url:"/demo“类型的url。在诸如导航这样的组件中，我们不能使用路由器或链接(从next/ Link )来阻止页面重新加载。

北极星将其url:"/demo"转换为<a>标记。我们需要将那些<a>标记包装在<Link>上。

为此，我们在<AppProvider> (如<AppProvider linkComponent={LinkWrapper}> )中添加了<AppProvider linkComponent={LinkWrapper}>。在这里，所有链接组件都将发送到我们的自定义LinkWrapper方法。

整个代码如下所示：

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",
            .....