設置 next-pwa 后，Nextjs 鏈接不從 / (start_url) 導航

Question

所有用於在我的網絡應用程序中工作的鏈接。 我已經遷移了該應用程序，使其成為使用 next-pwa 包的 PWA，現在我的索引頁面上沒有任何鏈接有效（它也恰好是 manifest.json 文件中的 start_url）。 我確信這與 PWA 配置有關，就像您單擊其中一個鏈接一樣，url 將更改但頁面不會重新呈現 - 但是，如果您只是輸入新的 url，則頁面確實會更改。 一旦離開 / 路線，我就可以使用所有可見的鏈接，但由於某種原因，它們在索引頁面上被破壞了。

這是我的自定義鏈接組件，它使用 next/link 組件（請注意我目前使用的是 next 12.3.1：

import styled from '@emotion/styled';
import NextLink from 'next/link';


export const Link = ({ href, children, justifyContent = 'center', width = '', ...rest }) => {
  const A = styled.a({
    color: 'inherit',
    textDecoration: 'inherit',
    display: 'flex',
    alignItems: 'center',
    margin: '0',
    padding: '0',
    width,
    height: '100%',
    justifyContent
  });

  return (
    <NextLink href={href} {...rest} passHref>
      <A {...rest}>
        {children}
      </A>
    </NextLink>
  );
};

下一步.config.js

const runtimeCaching = require('next-pwa/cache');

/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  runtimeCaching,
  navigationPreload: true
});

const nextConfig = withPWA({
  reactStrictMode: true,
  swcMinify: true,
  trailingSlash: true,
  images: {
    domains: [
      'firebasestorage.googleapis.com',
      'i.gyazo.com',
      'gateway.pinata.cloud'
    ]
  },
  async headers() {
    return [
      {
        source: '/:path*',
        headers: securityHeaders,
      }
    ]
  },
  experimental: {
    modularizeImports: {
      '@mui/material': {
        transform: '@mui/material/{{member}}'
      },
      '@mui/icons-material': {
        transform: '@mui/icons-material/{{member}}'
      },
      lodash: {
        transform: 'lodash/{{member}}'
      },
      'react-xarrows': {
        transform: 'react-xarrows/lib/{{member}}'
      }
    }
  },
});

// Use to analyze bundle size
// const withBundleAnalyzer = require('@next/bundle-analyzer')({
//   enabled: process.env.ANALYZE === 'true',
// });

module.exports = nextConfig;

清單.json

{
  "theme_color": "#ffffff",
  "background_color": "#1565c0",
  "display": "fullscreen",
  "start_url": "/",
  "scope": ".",
  "name": "Student Property Review",
  "short_name": "Student Property Review",
  "description": "A platform to read and review reviews about student properties and landlords; review your properties to help other students.",
  "icons": [
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

該網站目前運行於： https ://www.studentpropertyreview.co.uk/

Answer 1

這個問題似乎與該應用程序現在是 PWA 這一事實無關（盡管它可能有點責任）。 主要問題是在我的索引頁面上我使用了一個名為 Xarrows 的庫（我假設必須在客戶端調用它？）

import Xarrow, { useXarrow, Xwrapper } from 'react-xarrows';

我正在使用“useXarrow”來創建一個 updateXarrow() 函數，但似乎將其添加為對 useEffect 的依賴項會導致頁面上的鏈接無法正常運行。

  const updateXarrow = useXarrow();

  useEffect(() => {
    if (typeof window === 'undefined') return;
    updateXarrow();
    setTimeout(() => updateXarrow(), 5);
    setTimeout(() => updateXarrow(), 10);
  }, [updateXarrow]);

在某些情況下，箭頭沒有正確對齊，這就是為什么在頁面加載后多次調用該函數的原因，但我決定簡單地刪除它，現在網站可以正常工作了。