在 Gatsby 中禁用进入成功页面

Question

我有一个表单组件，用户在其中填写输入，点击发送，然后被重定向到成功页面。但是如果有人想像 domain.com/success 一样手动输入 url，他会看到那个页面。我怎样才能禁用它？例如，如果输入 domain.com/success，则重定向到 /home。这是我的代码：

import React, { useState } from "react"

const ContactForm = () => {
  const [formInput, setFormInput] = useState({
    email: "",
    message: "",
  })

  const onChange = e => {
    setFormInput({
      ...formInput,
      [e.target.name]: e.target.value,
    })
  }

  return (
    <section className="contact-form" id="contact">
      <h1>Contact Us</h1>
      <div className="container">
        <form
          method="post"
          netlify-honeypot="bot-field"
          data-netlify="true"
          name="contact"
          action="/success"
        >
          <input type="hidden" name="form-name" value="contact" />
          <div className="form-group">
            <div className="form-input">
              <input
                type="email"
                className="form-control"
                id="exampleFormControlInput1"
                placeholder="Your email"
                name="email"
                required
                value={formInput.name}
                onChange={onChange}
              ></input>
            </div>
          </div>
          <div className="form-group">
            <div className="form-input">
              <textarea
                className="form-control"
                id="exampleFormControlTextarea1"
                rows="3"
                placeholder="Your message"
                name="message"
                required
                value={formInput.message}
                onChange={onChange}
              ></textarea>
            </div>
          </div>

          <button type="submit" className="button button--lg">
            Send
          </button>
        </form>
      </div>
    </section>
  )
}

export default ContactForm

Answer 1

Gatsby 有一个名为 onInitialClientRender 的 API 钩子，它将在初始渲染（即发生完整页面加载时）而不是后续渲染（在导航客户端时）时调用。要使用它，您需要从 gatsby-browser.js 中导出一个具有该名称的函数。您可以使用此函数检查 window.location.pathname 是否与该路由不匹配，如果匹配，请使用新位置调用 navigate 以重定向用户。

import { navigate } from "gatsby"

export const onInitialClientRender = () => {
  if (window.location.pathname.startsWith("/success/")) {
    navigate("/")
  }
}

您可以解决此问题的另一种方法是仅在客户端呈现成功页面。 Here's the documentation for this process.