设置 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]);

在某些情况下，箭头没有正确对齐，这就是为什么在页面加载后多次调用该函数的原因，但我决定简单地删除它，现在网站可以正常工作了。