Deny direct access to specific pages

[skjorrface]

This is more a question than a gatsby related issue. Is there a way to restrict direct access to a page (for instance: /app/download) and to make it available only from other paths inside the website? Thanks beforehand!

[ryanditjia]

This issue talks about how you can pass data using navigateTo API.

src/pages/index.js

import React from 'react'
import Link, { navigateTo } from 'gatsby-link'

const IndexPage = () => (
  <div>
    <Link to="/secret-page">Regular link</Link>
    <button
      onClick={() =>
        navigateTo({
          pathname: '/secret-page',
          state: {
            showPage: true,
          },
        })
      }
    >
      Super secret link
    </button>
  </div>
)

export default IndexPage

src/pages/secret-page.js

import React from 'react'
import Link from 'gatsby-link'

const SecretPage = ({ location }) => {
  const { showPage } = location.state || false

  return showPage ? (
    <div>You have reached a secret page.</div>
  ) : (
    <div>You can’t access this secret page.</div>
  )
}

export default SecretPage

[skjorrface]

Oh thank you so much, this works like a charm! Any hint on how to do this for a static file as well?

[ryanditjia]

Hmm, I have no experience with that. Perhaps it requires something like authentication.

[tsegaat]

Thank you so much. I have been trying to do this the whole day... Looked at several YT vids and documentation but your way was just perfect for my project.

BTW: instead of "navigateTo" imported from gatsby-link. "navigate" from "gatsby" worked for me. If anyone got that error.