Fix github.io gh-pages routes react js BrowserRouter
npm install --save-dev gh-pages
Em seguida precisamos realizar algumas configurações em seu arquivo package.json .
Adicione no inicio do arquivo, logo acima do nome do seu projeto a url em "homepage" do seu repositório no Github no formato de Github Pages. Exemplo:
[{
"homepage": "http://user.github.io/repo",
"name": "project name",
"version": "0.1.0",
...]
*Substitua "user" pelo seu nome de usuário e "repo" pelo nome do repositório no Github.
Mais embaixo, no mesmo arquivo, em "Scripts" adicione o "predeploy" e "deploy" scripts ao seus scripts.
["scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},]
Agora basta rodar o comando "npm run deploy" (sem aspas) em seu terminal. Em seguida cheque a url "http://user.github.io/repo" para visualizar o seu projeto online.
Pode ser que você sofra com problemas de rotas (router) mostrando páginas em branco ou error 404. Para resolver isso, adicione "basename={process.env.PUBLIC_URL}" (sem aspas) ao seu "BrowserRouter". Exemplo:
[return (
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Routes>
<Route element={<Home/>} path="/" />
<Route element={<SignUp />} path="/signup" />]
Não esqueça de quando utilizar links em sua página os link tem que apontar corretamente:
[<a href={process.env.PUBLIC_URL + '/signup'} className="buttonSignup">]
Fazendo isso, deve resolver o problema para a página inicial, mas outras páginas devem persistir o problema de error 404, portanto é necessário fazer uma gambiarra. Copie o código abaixo, ou clicando aqui, e crie um arquivo denominado 404.html dentro do diretório "public" do seu projeto. Altere a variável "pathSegmentsToKeep" para 1 caso utilize um domínio personalizado ou para 0 caso use domínio padrão do github.
[<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>Single Page Apps for GitHub Pages</title> <script type="text/javascript"> // Single Page Apps for GitHub Pages // MIT License // https://github.com/rafgraph/spa-github-pages // This script takes the current url and converts the path and query // string into just a query string, and then redirects the browser // to the new url with only a query string and hash fragment, // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe // Note: this 404.html file must be at least 512 bytes for it to work // with Internet Explorer (it is currently > 512 bytes) // If you're creating a Project Pages site and NOT using a custom domain, // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1). // This way the code will only replace the route part of the path, and not // the real directory in which the app resides, for example: // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe // Otherwise, leave pathSegmentsToKeep as 0. var pathSegmentsToKeep = 0; var l = window.location; l.replace( l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' + l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') + (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') + l.hash ); </script> </head> <body> </body> </html>]
Em seguida abra o arquivo index.html, que está dentro do diretório "public" e adicione o trecho de código abaixo no inicio do head do seu código, antes das tags meta.
[<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function (l) {
if (l.search[1] === '/') {
var decoded = l.search.slice(1).split('&').map(function (s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
</script>]
Pronto, agora basta rodar o comando "npm run deploy" (sem aspas) em seu terminal. Em seguida cheque a url "http://user.github.io/repo" para visualizar o seu projeto online.
COMENTÁRIOS