[英]Nextjs links not navigating from / (start_url) after setting up next-pwa
All the links used to work in my web app.所有用于在我的网络应用程序中工作的链接。 I have since migrated the app so that it is a PWA using the next-pwa package, and now none of the links work on my index page (which also happens to be the start_url in the manifest.json file).
我已经迁移了该应用程序,使其成为使用 next-pwa 包的 PWA,现在我的索引页面上没有任何链接有效(它也恰好是 manifest.json 文件中的 start_url)。 I am sure this is related to the PWA config, as if you click on one of the links, the url will change but the page wont re-render - however, if you simply type the new url in, then the page does change.
我确信这与 PWA 配置有关,就像您单击其中一个链接一样,url 将更改但页面不会重新呈现 - 但是,如果您只是输入新的 url,则页面确实会更改。 Once away from the / route, I can use all the links that are visible, but for some reason they are broken on the index page.
一旦离开 / 路线,我就可以使用所有可见的链接,但由于某种原因,它们在索引页面上被破坏了。
Here is my custom link component, which uses the next/link component (please note I am currently using next 12.3.1:这是我的自定义链接组件,它使用 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>
);
};
next.config.js下一步.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;
manifest.json清单.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"
}
]
}
The website is currently running at: https://www.studentpropertyreview.co.uk/该网站目前运行于: https ://www.studentpropertyreview.co.uk/
It appears this issue is unrelated to the fact that the app is now a PWA (although it may be somewhat responsible).这个问题似乎与该应用程序现在是 PWA 这一事实无关(尽管它可能有点责任)。 The main issue is that on my index page I am using a library called Xarrows (which I assume has to be called on the client?)
主要问题是在我的索引页面上我使用了一个名为 Xarrows 的库(我假设必须在客户端调用它?)
import Xarrow, { useXarrow, Xwrapper } from 'react-xarrows';
I was using 'useXarrow' to create an updateXarrow() function, but it appears that adding this as a dependency to useEffect causes the links on the page not to function correctly.我正在使用“useXarrow”来创建一个 updateXarrow() 函数,但似乎将其添加为对 useEffect 的依赖项会导致页面上的链接无法正常运行。
const updateXarrow = useXarrow();
useEffect(() => {
if (typeof window === 'undefined') return;
updateXarrow();
setTimeout(() => updateXarrow(), 5);
setTimeout(() => updateXarrow(), 10);
}, [updateXarrow]);
In certain cases the arrows weren't correctly aligned, which is why the function is called multiple times after the page loads, but I decided to simply remove this and now the site works as it should.在某些情况下,箭头没有正确对齐,这就是为什么在页面加载后多次调用该函数的原因,但我决定简单地删除它,现在网站可以正常工作了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.