如何防止网站外重定向时出现 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 创建重定向。