Resolvendo o Erro 404 com React Router

A meses atrás criei um projeto usando o create-react-app e usei o react-router para lidar com as rotas da minha aplicação front-end, porém ao enviar minha build para o servidor, acabei sendo introduzido a um problema, quando o usuário entrava em uma rota e atualizar a página ou quando ele acessava através de um link externo ele retornava o erro 404, devido ao arquivo não ter sido encontrado no endereço requisitado, para resolver isso usei regras de redirecionamento no servidor. Espero que minha solução possa ajudar quem também passar por esse problema.

Resolvendo no Apache e servidores com suporte ao arquivo .htaccess

Basta criar uma rota de redirecionamento, como exemplificado abaixo, primeiro crie um arquivo .httaccess na pasta public do seu projeto react. É importante que este arquivo esteja na raiz quando for feito sua build.

O arquivo exemplificado pode ser encontrado aqui.

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

Resolvendo no NGINX com o arquivo de configuraçao nginx.conf

Acesse o arquivo de configuraço do seu nginx, normalmente localizado em /etc/nginx/conf.d/default.conf e adcione a linha try_files $uri $uri/ /index.html; como a seguir:

Observando que apenas a linha try_files $uri $uri/ /index.html; foi alterada do meu arquivo de configuração padrão. O mesmo pode ser encontrado aqui.

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
	    try_files $uri $uri/ /index.html;
    }

Resolvendo em servidores Netlify

Para resolver este tipo de erro ao subir em servidores do Netlify você precisa criar um arquivo _redirect na pasta public do seu projeto e adcionar a seguinte linha no arquivo. É importante que este arquivo esteja na raiz quando for feito sua build.

O mesmo pode ser encontrado aqui.

/* /index.html 404