将Shopify Polaris链接与Nextjs链接连接

Question

当使用Shopify Polaris时，许多内部组件输出单个静态<a />标记，这打破了我的NextJS应用程序体验，因为单击链接会重新加载页面。

如何使用<Link />组件使购物北极星链接的行为像Nextjs一样？

Answer 1

在你的北极星AppProvider上，你可以提供一个linkComponent组件，北极星将使用它来渲染所有的链接，然后用nextjs Link组件简单地包装它：

import React from 'react'
import Link from 'next/link'
import { AppProps } from 'next/app'
import { AppProvider } from '@shopify/polaris'
import { NextPage } from 'next'
import { LinkLikeComponentProps } from '@shopify/polaris/dist/types/latest/src/utilities/link'
import '@shopify/polaris/dist/styles.css'

/**
 * Connects Nextjs Link with Polaris Links
 * @param props
 * @returns
 */
function LinkWrapper(props: LinkLikeComponentProps) {
  const { children, url, ...rest } = props

  return (
    <Link href={url}>
      <a {...rest}>{children}</a>
    </Link>
  )
}

const MyApp: NextPage<AppProps> = function MyApp({
  Component,
  pageProps,
  router,
}) {
 

  return (
    <AppProvider
      linkComponent={LinkWrapper}
    >
      {/* ... */}
    </AppProvider>
  )
}

export default MyApp