[英]Connect Shopify Polaris links with Nextjs Links
When using Shopify Polaris, many internal components output a single static <a />
tag, this breaks my NextJS app experience since clicking on the link reloads the page.使用 Shopify Polaris 时,许多内部组件会输出单个静态
<a />
标签,这会破坏我的 NextJS 应用体验,因为单击链接会重新加载页面。
How can I make Shopify Polaris links behave just like Nextjs ones with <Link />
component?如何使 Shopify Polaris 链接的行为与带有
<Link />
组件的 Nextjs 链接一样?
On your Polaris AppProvider
you can provide a linkComponent
component and Polaris will use that to render all links, then simple wrap it with nextjs Link
component:在您的 Polaris
AppProvider
,您可以提供一个linkComponent
组件,Polaris 将使用它来呈现所有链接,然后使用 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.