next.js - 将 Shopify Polaris 链接与​​ Nextjs 链接连接起来

Question

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

如何使 Shopify Polaris 链接的行为与带有<Link />组件的 Nextjs 链接一样？

Answer 1

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

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