如何强制 Gatsby 将特定 URL 路径重定向到外部站点？答案

【问题标题】：How to force Gatsby to redirect a specific URL path to an external site?如何强制 Gatsby 将特定 URL 路径重定向到外部站点？
【发布时间】：2020-08-05 12:12:21
【问题描述】：

我有一个 Gatsby 站点，由于某些特定要求，我需要将任何尝试点击特定 URL 路径（没有页面）的人重定向到外部站点。此 URL 路径不是站点内的页面，但由于文档超出我的控制范围，用户可能倾向于键入它。

这是一个示例：假设该站点位于 https://www.example.com。用户可能会访问不存在的https://www.example.com/puppies。我的文件结构不包含src/pages/puppies.js 文件。但是，当输入该 URL 时，我需要将用户完全重定向到另一个站点，例如 https://www.stackoverflow.com。

【问题讨论】：

标签： reactjs amazon-web-services redirect

【解决方案1】：

我没有使用 Gatsby 到那种程度，知道它有这样的配置，所以其他人可能会纠正我。我处理这个问题的方法是通过您的应用所在的托管服务提供商。

例如，如果您使用的是 Netlify：

创建一个_redirects 文件，内容如下：

/* /index.html 200

或者

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

这将导致所有https://yourwebsite.com/IDontHaveThisRoute 回退到加载您的.js 的/index.html。

我提供 Netlify 示例只是为了让您了解如何通过您选择的托管服务提供商完成它。我会研究可以在我的域部署的重定向中放入的配置。

【讨论】：

我们托管在 AWS 上。我们从另一个开发人员那里接管了该应用程序，因此我对设置并不完全熟悉，但我将从这个角度开始研究它。感谢您的提示！
值得指出的是，Netlify 目前不支持 307（临时重定向）状态码。他们建议坚持使用 302。我很难弄清楚为什么我的 307 重定向不起作用，直到在文档中找到他们的注释：docs.netlify.com/routing/redirects/redirect-options

【解决方案2】：

This question 帮助我指明了正确的方向。我能够使用 Gatsby 的 componentDidMount() 来强制重定向，如下所示，使用名为 puppies.js 的新文件来“捕获”用户输入的路径：

// puppies.js

    import React, { Component } from 'react'
    
    class Puppies extends Component {
        componentDidMount() {
            window.location.replace("https://www.stackoverflow.com");
        }
    
        render() {
            return <div />
        }
    }
    
    export default Puppies

【讨论】：

【解决方案3】：

感谢Paul Scanlon，他提到在Gatsby 中使用onRouteUpdate，它就像一个魅力

import { navigate } from 'gatsby';


export const onRouteUpdate = ({ location }) => {
  if (location.pathname === '/dashboard') {
    navigate('/dashboard/reports');
  }
};

【讨论】：