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

Question

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

我尝试的是Redirect从返回的组件中导入@reach-router并在其中导入，但这会导致错误。IndexRedirect 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 文档：

重定向与 componentDidCatch 一起使用以防止树呈现并从新位置重新开始。

因为 React 不会吞下这个错误，这可能会困扰你。例如，重定向将触发 Create React App 的错误覆盖。在生产中，一切都很好。如果它困扰您，添加noThrow和 Redirect 将在不使用 componentDidCatch 的情况下进行重定向。

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

<Redirect noThrow to="/topath" />

---

你也可以让 Gatsby 为你做这件事，在gatsby-node.js：

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

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

在这里查看更多。

---

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

Answer 2

改用这个。useEffect是等效于 componentDidMount 的 React 钩子。

import { useEffect } from 'react';
import { navigate } from 'gatsby';

export default () => {
  useEffect(() => {
    navigate('/blog/');
  }, []);
  return null;
};