Hard refresh utilizando React Router, retorna 404. #708
Replies: 29 comments 5 replies
-
Se estiver usando a history api, você precisa de um server pra entregar a rota na url correta ;) |
Beta Was this translation helpful? Give feedback.
-
Sim, basicamente é simplesmente dizer que todo request da sua aplicação deve direcionar para o |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
@thulioph, resolveu? |
Beta Was this translation helpful? Give feedback.
-
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 😄 |
Beta Was this translation helpful? Give feedback.
-
Tentei da seguinte maneira, mas ainda sem sucesso:
Não tenho a possibilidade de adicionar um arquivo de configuração na raiz do projeto, pois o mesmo está rodando no Heroku. |
Beta Was this translation helpful? Give feedback.
-
O '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 Ae só rodar esse cara com |
Beta Was this translation helpful? Give feedback.
-
com o |
Beta Was this translation helpful? Give feedback.
-
E ele vai servir certinho na porta 8080 =) |
Beta Was this translation helpful? Give feedback.
-
No heroku você vai ter alguns problemas em direcionar as requests para o index, da uma olhada nesse artigo. |
Beta Was this translation helpful? Give feedback.
-
Vou tentar essas abordagens do @fdaciuk e @evansantos. |
Beta Was this translation helpful? Give feedback.
-
Pode crer viu @phsantiago, valeu pelo link! |
Beta Was this translation helpful? Give feedback.
-
Onde pretende hospedar seu build? @thulioph |
Beta Was this translation helpful? Give feedback.
-
Não implementei nenhuma outra solução descrita aqui, utilizando apenas este buildpack do Heroku já solucionou meu problema. Basicamente é preciso criar um arquivo Obrigado @fdaciuk @evansantos @nurycaroline e @phsantiago pela ajuda ❤️
|
Beta Was this translation helpful? Give feedback.
-
O build também tá no heroku @phsantiago. |
Beta Was this translation helpful? Give feedback.
-
Certo! Se for continuar lá isso resolve mesmo. Caso precise tenho outras soluções para Apache, Nginx e S3. Boa sorte! |
Beta Was this translation helpful? Give feedback.
-
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 :/ |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
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 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 =) |
Beta Was this translation helpful? Give feedback.
-
Para quem usa Nginx eu adicionei isso no arquivo de configuração do site |
Beta Was this translation helpful? Give feedback.
-
Mas e se eu não quiser que seja carregado o arquivo Eu estou passando por esse problema. Minha aplicação React está hospedada no AWS, através do serviço AWS Amplify. |
Beta Was this translation helpful? Give feedback.
-
@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 :) |
Beta Was this translation helpful? Give feedback.
-
@fdaciuk desculpa a minha ignorância, mas como eu faço pra esse |
Beta Was this translation helpful? Give feedback.
-
@joaobonsegno quando você gera o build do seu projeto criado com CRA, por exemplo, dentro do diretório |
Beta Was this translation helpful? Give feedback.
-
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? |
Beta Was this translation helpful? Give feedback.
-
@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 :) |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Cria um .htaccess com a linha
|
Beta Was this translation helpful? Give feedback.
-
Que dahora estamos juntos hj na HF @thulioph! Não lembrava dessa thread haha |
Beta Was this translation helpful? Give feedback.
-
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.Alguém já passou por esse problema antes? Teria alguma sugestão de como eu posso resolver?
Beta Was this translation helpful? Give feedback.
All reactions