gatsby - 如何在 Gatsby.JS 项目中从索引页重定向到以编程方式生成的路由

Question

我想将 gatsby 项目中的索引 / 重新路由到 /blog 。 /blog 路由的页面是在 gatsby-node.js 文件内生成的。

我尝试的是从 @reach-router 导入 Redirect 并在 Index 组件内返回 Redirect to='/blog ' 但这会导致 Uncaught RedirectRequest 错误。

index.js 文件:

import React from 'react'
import { Redirect } from '@reach/router'


class BlogIndex extends React.Component {
  render() {
    return (
      <Redirect to={`/blog`} />
    )
  }
}

export default BlogIndex

Answer 1

来自@reach/router docs :

Redirect works with componentDidCatch to prevent the tree from rendering and starts over with a new location.

Because React doesn’t swallow the error this might bother you. For example, a redirect will trigger Create React App’s error overlay. In production, everything is fine. If it bothers you, add noThrow and Redirect will do redirect without using componentDidCatch.

添加一个 noThrow 标签似乎可以解决这个问题:

<Redirect noThrow to="/topath" />

<小时/>

您也可以要求 Gatsby 在 gatsby-node.js 中为您执行此操作:

exports.createPages = ({ actions }) => {
  const { createRedirect } = actions

  createRedirect({
    fromPath: `/`,
    toPath: `/topath`,
    redirectInBrowser: true,
    isPermanent: true,
  })
}

参见more here .

<小时/>

我也会将此重定向规则添加到该网站的托管位置。