Hard refresh utilizando React Router, retorna 404.

[thulioph]

Fala pessoal!

Estou com um problema envolvendo react-router em sua versão mais recente v4, e não consigo achar mais detalhes sobre como resolver este problema.

Basicamente, quando acesso uma rota diferente da principal e atualizo a página com um CTRL + R (hard refresh), minha aplicação não consegue encontrar a rota e manda um 404.

O problema só acontece apenas quando rola um hard refresh.

Alguém já passou por esse problema antes? Teria alguma sugestão de como eu posso resolver?

[fdaciuk]

Se estiver usando a history api, você precisa de um server pra entregar a rota na url correta ;)

[fdaciuk]

Sim, basicamente é simplesmente dizer que todo request da sua aplicação deve direcionar para o index.html =)

[nurycaroline]

Passei por isso recentemente por usar o IIS, resolvi o problema utilizando o URL Rewrite e criando um web.config na raiz do projeto.

https://gist.github.com/nurycaroline/dde1c54f5aa2ce7177423d1fe9270a58

[felipefialho]

@thulioph, resolveu?

[thulioph]

Ainda não @lfeh , eu vi aqui mas não consegui implementar ainda. Resolvo isso hoje e mando um feedback aqui, valeu @fdaciuk e @nurycaroline 😄

[thulioph]

Tentei da seguinte maneira, mas ainda sem sucesso:

1. Instalei o módulo http-server.

"preinstall": "npm i -g http-server"

2. Apontei a pasta /build (gerada pelo react) para ser utilizada pelo http-server.

"serve-build": "http-server build"

Não tenho a possibilidade de adicionar um arquivo de configuração na raiz do projeto, pois o mesmo está rodando no Heroku.

Cc: @fdaciuk @nurycaroline

[fdaciuk]

O http-server é para servir estáticos. Você precisa gerenciar as rotas. Você pode usar o express, fica bem simples:

'use strict'

const { join } = require('path')
const express = require('express')
const app = express()

app.get('*', (req, res) => {
  res.sendFile(join(__dirname, 'build', 'index.html'))
})

app.listen(3000)
console.log('localhost:3000')

Isso vai fazer com que qualquer request do tipo get no seu servidor, sirva o arquivo ./build/index.html.

Ae só rodar esse cara com node index.js ou qualquer que seja o seu script que vc possa rodar, e boa =)

[evansantos]

com o http-server-spa, se você não quiser usar o express, koa e demais pode ser que você resolva também... mas o melhor approach é o do @fdaciuk

[fdaciuk]

http-server-spa funciona legal xD
Só se for usar ele, coloque o index.html na raiz, senão ele dá pau com o fallback.
Depois é só rodar:

http-server-spa . index.html 8080

E ele vai servir certinho na porta 8080 =)

[phsantiago]

No heroku você vai ter alguns problemas em direcionar as requests para o index, da uma olhada nesse artigo.

[thulioph]

Vou tentar essas abordagens do @fdaciuk e @evansantos.

[thulioph]

Pode crer viu @phsantiago, valeu pelo link!

[phsantiago]

Onde pretende hospedar seu build? @thulioph

[thulioph]

Não implementei nenhuma outra solução descrita aqui, utilizando apenas este buildpack do Heroku já solucionou meu problema.

Basicamente é preciso criar um arquivo static.json na raiz do projeto e setar algumas configurações como root e routes; existem umas outras configurações para segurança e HTTPS mas o básico é isso.

Obrigado @fdaciuk @evansantos @nurycaroline e @phsantiago pela ajuda ❤️

Resolvido! Cc @lfeh

[thulioph]

O build também tá no heroku @phsantiago.

[phsantiago]

Certo! Se for continuar lá isso resolve mesmo. Caso precise tenho outras soluções para Apache, Nginx e S3.

Boa sorte!

[thurdelima]

Boa tarde, to com esse mesmo erro, meu router ta assim

ReactDOM.render(
        <HashRouter>
            <Switch>
                <Route exact path="/login" component={LoginPage} />
                <Route path="/cadastro" component={SignupPage} />
                <Route path="/home" component={HomePage} />
                <Route path="/mensagens" component={MessagesPage} />
                <Route path="/servicos" component={ServicesPage} />
                <Route path="/servicosView/:id" component={ServiceViewContent} />
                <Route path="/planos" component={PlansPage} />
                <Route path="/checkout" component={CheckoutPage} />
                <Route path="/perfil" component={ProfilePage} />
                <Redirect from="/" to="/login" exact={true} />
            </Switch>
        </HashRouter>,
        document.getElementById("root")
    );

Professor @fdaciuk o seu script é só colocar no próprio index.js do react e subir pra prod normalmente? Preciso fazer algo antes? Perdidaço :/

[thurdelima]

<HashRouter> <Switch> <Route exact path="/login" component={LoginPage} /> <Route path="/cadastro" component={SignupPage} /> <Route path="/home" component={HomePage} /> <Route path="/mensagens" component={MessagesPage} /> <Route path="/servicos" component={ServicesPage} /> <Route path="/servicosView/:id" component={ServiceViewContent} /> <Route path="/planos" component={PlansPage} /> <Route path="/checkout" component={CheckoutPage} /> <Route path="/perfil" component={ProfilePage} /> <Redirect from="/" to="/login" exact={true} /> </Switch> </HashRouter>

[fdaciuk]

Oi @thurdelima! O problema não é com o React Router! A configuração que eu passei acima, usando o express, é para você subir um servidor com Node.js, levando em consideração que os arquivos estáticos do seu app estão em um diretório build.

Mas isso vai depender do servidor que você está subindo sua aplicação: tem que ver se lá você vai ter acesso para instalar dependências e subir o app com Node.

Qual servidor de hospedagem você está usando? E está usando também o create-react-app?

---

PS: Para colocar código aqui no GitHub, é só usar 3 crases antes e depois do código, que ele fica formatado certinho =)
Editei seu post só pra deixar correto o código :)

[aderbas]

Para quem usa Nginx eu adicionei isso no arquivo de configuração do site error_page 404 =200 /index.html;. Para minha aplicação não interessa o erro 404 então ele transforma o código em 200 e joga pra index.html.

[joaobonsegno]

Mas e se eu não quiser que seja carregado o arquivo index.html ao dar refresh, mas, em vez disso, continuar na rota em que o usuário estava quando deu o refresh?

Eu estou passando por esse problema. Minha aplicação React está hospedada no AWS, através do serviço AWS Amplify.

[fdaciuk]

@joaobonsegno essa é a ideia de carregar o index.html: nele vai conter o script JS que carrega o React e o React Router, que vai tratar das rotas do lado do client.

A ideia é que a pessoa continue na rota que foi dado o refresh mesmo :)

[joaobonsegno]

@fdaciuk desculpa a minha ignorância, mas como eu faço pra esse index.html carregar o meu React e o meu React Router, então?

[fdaciuk]

@joaobonsegno quando você gera o build do seu projeto criado com CRA, por exemplo, dentro do diretório build estarão todos os arquivos que você precisa subir para o seu servidor. Lá tem a única index.html da aplicação toda. Esse é o arquivo de entrada do seu app, e é esse arquivo que deve ser carregado a cada request GET :)

[codenads]

Então, estou com o mesmo problema, mas estou hospedando meu frontend pela hostinger e o meu backend pela heroku, como eu implementaria esse catch-all, sendo que estão hospedados em lugares diferentes? Como chegar no index.html?

[fdaciuk]

@codenads você precisa configurar o servidor que serve seu frontend. Basicamente você precisa saber que servidor está usando na hostinger: Apache? Nginx? Sabendo disso, só precisa buscar como configurar esse servidor para servir uma SPA e boa :)

[codenads]

Cara, passei tanto tempo tentando resolver isso, tentei até hospedar em outro lugar para que eu pudesse fazer o catch-all no back. Voltei pra hostinger, vi que utilizavam apache e só foi adicionar poucas linhas no .htaccess e resolveu. Primeira vez que estava fazendo um deploy, deu muita dor de cabeça hahaha, enfim, agradeço bastante.

[sociavel]

Cria um .htaccess com a linha

RewriteRule .* index.html

[BrunoYottabyte]

Muito obrigado !!

[aalicav]

Você é um anjo

[Burnout156]

muito obrigado, até hoje isso resolve

[phsantiago]

Que dahora estamos juntos hj na HF @thulioph! Não lembrava dessa thread haha

[felquis]

que daora haha parabéns

[thulioph]

Nossa mano, verdade, que mundo pequeno hahahaha!