Как перенаправить со страницы индекса на маршрут, который генерируется программно, в проекте 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

ht tps://stackru.com/images/e7dd007215563ab312372cbc69d92a370b724821.png

Answer 1

Из @ досягаемости / документы маршрутизатора:

Redirect работает с 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,
  })
}

Подробнее здесь.

---

Я бы добавил это правило перенаправления туда, где размещен сайт.

Answer 2

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

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

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