1

我通过钩子createRedirect内的动作进行重定向。createPages使用重定向的函数如下所示：

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 页面包括“窗口”黑客，它必须防止该页面出现在整个网站上：

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;
4

1 回答 1

0

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

理想情况下，所有重定向都应该在服务器端处理。如果您使用 Netlify 作为提供程序，您可以使用该_redirects文件或其他一些插件创建重定向。

于 2021-02-03T16:27:48.903 回答