Início / coding / Perguntas / 79544442
Accepted
Illimar Rekand
Asked: 2025-03-30 18:23:56 +0800 CST

O site React implantado nas páginas do GitHub renderiza apenas parcialmente

  • 772

Criei uma página da web React com base neste modelo . Tentei implementar este site nas páginas do GitHub conforme descrito aqui , e ele renderiza parcialmente - veja aqui , há dois problemas principais:

  1. Apenas partes do site são renderizadas com sucesso. Parece que os componentes ElasticUI não estão renderizando corretamente e
  2. quando tento navegar para qualquer outra aba do site (por exemplo, "Palestrantes"), aparece um erro 404.

Executar este site no localhost funciona perfeitamente, então parece ser um problema com a implantação no GH Pages. O código pode ser encontrado aqui: https://github.com/kjemist/trikkefestivalen .

Também tentei implementar este site no Vercel, mas ele renderiza ainda menos do que o que vejo nas páginas do GH - o que é um pouco estranho, considerando que a demonstração do modelo que uso está hospedada no Vercel.

reactjs

1 respostas

  1. Best Answer

    Há duas coisas que precisam ser alteradas para que tudo funcione conforme o esperado com as páginas do GitHub.

    1. As páginas do Github não funcionam com a API de histórico. Para uma página como a sua, que tem vários subcaminhos, funcionar corretamente nas páginas do Github, você precisará usar um estilo de roteamento Hash. Você terá que mudar BrowserRouterpara HashRouterno seu código.

      Essa alteração também adicionará um #em seus URLs comohttps://kjemist.github.io/trikkefestivalen/#/events

      Sem essa alteração, os links para qualquer um dos seus subcaminhos falharão, ou seja, https://kjemist.github.io/trikkefestivalen/eventsretornarão um erro 404 se você tentar acessá-los diretamente sem navegar até eles.

    2. Quando o código é implantado em páginas do github, a url base é um subdiretório https://kjemist.github.io/trikkefestivalen/e não o diretório principal. Isso requer algumas mudanças na navegação que provavelmente não eram necessárias no seu código de modelo.

      Há várias opções aqui. Uma feia, mas que requer menos quantidade de mudanças, seria acrescentar process.env.PUBLIC_URL + "#"sempre que você empurra um caminho como history.push(process.env.PUBLIC_URL + "#/events").

      Melhor opção, você pode usar useNavigatecomo

        let navigate = useNavigate();

  const tabs = [
    {
      id: "event",
      label: t("Event Details"),
      onClick: () => {
        navigate("/events");
      },
    }
    • 3

relate perguntas