reactjs - 在 Gatsby.js 中禁用直接路由到特定页面

Question

我有成功页面，在 Gatsby 中提交表单时必须显示该页面。但用户可以直接访问/success页面。有什么办法可以预防吗？

Answer 1

有几种方法可以做到这一点。 One is outlined here by Gatsby并涉及创建仅客户端路由(也就是说，Gatsby 不会让 React 在服务器端渲染它，但会路由到客户端/浏览器上的组件)。看起来像这样:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*"

    // Update the page.
    createPage(page)
  }
}

我采取的方法是渲染页面，特别是当它不是特别敏感的页面时，但检查渲染时的某些条件，并在条件不满足时使用navigate t 满意。

例如，如果您将 formSubscribed 存储在 AppContext 中，则可以执行以下操作:

import React, { useContext } from "react"
import { navigate } from "gatsby"

const SuccessPage = () => {
  const { formSubmitted } = useContext(AppContext)
  return formSubmitted ? <div>Thanks!</div> : navigate("/contact", { replace: true })
}