如何解决如何防止网站外重定向时出现 404 页面闪烁?
我使用 createRedirect
钩子内的 createPages
动作进行重定向。
使用重定向的函数如下所示:
const redirects = [
{
fromPath: '/start',toPath: 'https://www.youtube.com/',redirectInbrowser: true,force: true,statusCode: 200,isPermanent: true
},{
fromPath: '/start/',{
fromPath: '/blogs',toPath: '/blog/',{
fromPath: '/blogs/',]
const createRedirects = ({createRedirect}) => {
redirects.map(e => createRedirect(e))
}
module.exports = {
createRedirects
};
gatsby-node.js 仅此而已:
const {createRedirects} = require("./utils/redirects");
const {createBlogPages} = require('./utils/blog');
const {createDocsPages} = require('./utils/docs');
const {createCategoryPages} = require('./utils/category');
exports.createPages = async ({actions,graphql,reporter}) => {
createRedirects(actions);
await createBlogPages(actions,reporter);
await createDocsPages(actions,reporter);
await createCategoryPages(actions,reporter);
}
根据此问题,404 页面包含“窗口”黑客,必须防止此页面出现在整个网站上:
import React from 'react';
import Header from '../components/header/header';
import Footer from '../components/footer/footer';
import BottomContent from '../components/bottomContent/bottomContent';
import Helmet from "react-helmet";
const NotFound = () => {
const browser = typeof window !== "undefined" && window;
return (browser && <>
<Header route={''}/>
<Helmet>
<title>UP9 | 404</title>
</Helmet>
<div className="content" style={{margin: '5rem 0 8rem','text-align': 'center'}}>
<h1 style={{'font-size': '5rem','line-height': '1','margin-bottom': '1.5rem'}}>404</h1>
<h3 className={'text-light'}>Oops,seems like this link is not supported</h3>
</div>
<BottomContent />
<Footer />
</>)
}
export default NotFound;
解决方法
所有客户端重定向都容易出现闪烁,因为触发重定向的 JavaScript 代码将由浏览器本身管理。
理想情况下,所有重定向都应在服务器端处理。如果您使用 Netlify 作为提供程序,则可以使用 _redirects
文件或某些 other plugins 创建重定向。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。