Как перенаправить со страницы индекса на маршрут, который генерируется программно, в проекте Gatsby.JS

Question

Я хочу перенаправить индекс / на /blog в проекте Гэтсби.Страница с маршрутом /blog создается внутри файла gatsby-node.js.

Я пытался импортировать Redirect из @reach-router и внутри компонента 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

Используйте это вместо.useEffect - это ловушка React, эквивалентная componentDidMount.

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

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

Answer 2

Начиная с @ reach / router docs :

Перенаправление работает с componentDidCatch для предотвращения рендеринга дерева и запускается заново с новым расположением.

Потому чтоReact не проглатывает ошибку, это может вас беспокоить.Например, перенаправление вызовет наложение ошибки Create React App.В производстве все нормально.Если это вас беспокоит, добавьте noThrow и Redirect выполнит перенаправление без использования componentDidCatch.

Добавление тега noThrow, кажется, решает эту проблему:

<Redirect noThrow to="/topath" />

---

Вы также можете попросить Гэтсби сделать это для вас, в gatsby-node.js:

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

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

См. подробнее здесь .

---

I 'добавьте это правило перенаправления и на сайт, на котором размещен сайт.