如何防止在网站外重定向时出现 404 页面闪烁？

Question

我在 createPages 挂钩中使用 createRedirect 操作进行重定向。使用重定向的函数如下所示：

const redirects = [
    {
        fromPath: '/start',
        toPath: 'https://www.youtube.com/',
        redirectInBrowser: true,
        force: true,
        statusCode: 200,
        isPermanent: true
    },
    {
        fromPath: '/start/',
        toPath: 'https://www.youtube.com/',
        redirectInBrowser: true,
        force: true,
        statusCode: 200,
        isPermanent: true
    },
    {
        fromPath: '/blogs',
        toPath: '/blog/',
        redirectInBrowser: true,
        force: true,
        statusCode: 200,
        isPermanent: true
    },
    {
        fromPath: '/blogs/',
        toPath: '/blog/',
        redirectInBrowser: true,
        force: true,
        statusCode: 200,
        isPermanent: true
    },
]

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, graphql, reporter);
    await createDocsPages(actions, graphql, reporter);
    await createCategoryPages(actions, graphql, reporter);
}

根据这个问题，404 页面包含“window”黑客攻击，它必须阻止该页面出现在整个网站上：

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;

Answer 1

所有客户端重定向都容易出现闪烁，因为触发重定向的 JavaScript 代码将由浏览器本身管理。

理想情况下，所有重定向都应在服务器端处理。如果您使用 Netlify 作为提供程序，则可以使用 _redirects file or some other plugins.

创建重定向

如何防止在网站外重定向时出现 404 页面闪烁？

How to prevent 404 page flicker on redirect outside the website?

javascript

node.js

gatsby

gatsby-image

gatsby-plugin