从 Gatsby 中的模板强制执行 404答案

【问题标题】：Force a 404 from a template in Gatsby从 Gatsby 中的模板强制执行 404
【发布时间】：2021-01-09 05:21:57
【问题描述】：

我有一个页面 src/pages/drafts.js，我从该页面呈现一些草稿，但仅限于本地。

所以，当NODE_ENV 投入生产时，我希望/drafts 的路线是404。

import React from 'react'

if (process.env.NODE_ENV !== 'development') {
  // Invoke 404 somehow...
}

const MyComponent = () => <span>smth</span>

我可以通过返回null来取消组件中的渲染。

import React from 'react'

const MyComponent = () => {
  if (process.env.NODE_ENV !== 'development') {
    return null
  }

  return (
    <span>smth</span>
  )
}

但这在很多方面都不是最理想的。

我还可以浏览 404 页面：

import React from 'react'
import { navigate } from 'gatsby'

const MyComponent = () => {
  React.useEffect(() => {
    if (process.env.NODE_ENV !== 'development') {
      navigate('/404');
    }
  })

  return (
    <span>smth</span>
  )
}

这可行，但如果您加载路由 /404，则 HTTP 状态代码是 200 而不是 404。

我想我的问题是，有没有办法在模板加载之前执行 404？或者以某种方式在非开发环境中删除src/pages/drafts.js？

【问题讨论】：

客户端重定向可能工作得很好......虽然盖茨比创建了public/drafts/index.html，但这只是空的。

标签： reactjs graphql http-status-code-404 gatsby

【解决方案1】：

只需将其导入并作为另一个 React 组件返回：

import React from 'react'
import NotFound from '/path/to/404/page'

const Drafts = () => {

   if (process.env.NODE_ENV !== 'development') {
     return <NotFound />;
   }

  return (
     <span>smth</span>
   )
}


export default Drafts

你也可以自动设置：

import React from 'react'
import NotFound from '/path/to/404/page'

const Drafts = () => {
   let RenderPage= <span>smth</span>; 
 
   if (process.env.NODE_ENV !== 'development') {
     RenderPage = NotFound;
   }
 }


export default RenderPage

【讨论】：

【解决方案2】：

扩展 Ferran Buireu 的回答：导入 404，然后根据环境导出：

// src/pages/drafts.js
import React from 'react'
import NotFound from './404'

const Drafts = () => {
  return (
    <span>smth</span>
  )
}

export default process.env.NODE_ENV !== 'development' ? NotFound : Drafts

返回的404 页面有一个200 状态码，这可能是也可能不是问题。

【讨论】：

我已经编辑了我的答案，因为您根据我的问题回答自己的问题是没有意义的。我添加了一种新方法。最好返回一个简单的组件，而不是在导出中做一个三元条件