Отключить маршрутизацию на определенную страницу прямо в Gatsby.js

Question

У меня есть страница успеха, которая должна отображаться при отправке формы в Гэтсби. Но пользователь может напрямую посетить страницу успеха. Есть ли способ предотвратить это?

Answer 1

Есть несколько способов сделать это. Один из них описан здесь 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, если условие не выполняется.

Например, если вы сохранили formSubmitted в 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 })
}