TypeError：无法读取 next.js 链接中 null 的属性（读取“推送”）

Question

我正在使用Vite创建一个可重用的组件。 当我发布并重用它时，我看到了这个错误：

TypeError：无法读取 null 的属性（读取“推送”）

这是我的组件的代码：

import React from "react";
import Link from "next/link";

const  ShowText = ({title})=>{
    return(
        <Link href="/blog">{title}</Link>
    )
}

export default ShowText

如您所见，我只使用next/link中的这个Link组件。

这是我的package.json ：

{
  "name": "my-component-name",
  "version": "0.0.5",
  "description": "",
  "license": "MIT",
  "author": "",
  "keywords": [],
  "files": [
    "dist",
    "README.md"
  ],
  "main": "./dist/my-component.umd.js",
  "module": "./dist/my-component.es.js",
  "exports": {
    ".": {
      "import": "./dist/my-component.es.js",
      "require": "./dist/my-component.umd.js"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest run",
    "watch": "vitest",
    "coverage": "vitest run --coverage"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "eslintConfig": {
    "env": {
      "browser": true,
      "node": true,
      "es2020": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended"
    ],
    "parserOptions": {
      "sourceType": "module"
    }
  },
  "devDependencies": {
    "@testing-library/dom": "^8.16.0",
    "@testing-library/react": "^13.3.0",
    "@vitejs/plugin-react": "^2.0.0",
    "c8": "^7.12.0",
    "eslint-plugin-react": "^7.30.1",
    "jsdom": "^20.0.0",
    "next": "12.1.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-test-renderer": "^18.2.0",
    "vite": "^3.0.3",
    "eslint": "8.17.0",
    "eslint-config-next": "12.1.6",
    "vitest": "^0.19.1"
  }
}

这是我的vite.config.js ：

import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/lib/index.jsx'),
      name: 'my-component-mohammad',
      fileName: (format) => `my-component.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom','next'],
      output: {
        globals: {
          react: 'React'
        }
      }
    }
  },
  plugins: [react()]
})

我做错了什么，我该如何解决这个错误？

Answer 1

请像这样尝试。 它需要 onClick 监听器。

<Button type="button" onClick={(e) => router.push('/blog')}>
  {title}
</Button>

// or

<Link href="/">
   <a onClick={(e) => handleClick(e, "/blog")}>{title}</a>
</Link>