next.js - 将 Shopify Polaris 链接与 Nextjs 链接连接起来
问题描述
使用 Shopify Polaris 时,许多内部组件会输出单个静态<a />
标签,这会破坏我的 NextJS 应用体验,因为单击链接会重新加载页面。
如何使 Shopify Polaris 链接的行为与带有<Link />
组件的 Nextjs 链接一样?
解决方案
在你的 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
推荐阅读
- json - 错误语法错误:JSON.parse 中位置 0 的 JSON 中的意外标记 <
) 在 Angular 6 应用中 - python - 玛雅电话号码查询
- ios - recaptcha 验证后的空白页使用电话号码 Swift 在 iOS 上使用 Firebase 进行身份验证
- php - (.on(input, function)) 中的替代方式
- laravel - Route.php 第 280 行中的 ReflectionException:方法 App\Http\Controllers\UserController::Signup() 不存在
- ios - 快速访问类文件时出现上下文闭包类型错误
- mysql - 如何在 Node.js 应用程序中导入 mysqldump?
- ssas - 如何在 TABULAR SSAS 中更新表关系
- ios - 大 UINavigationBar 在弹回 rootViewController 时平滑调整大小
- javascript - 为所有人查找边框颜色