Solución:
Para capturar todos los redireccionamientos, use /* /index.html 200
en _redirects
expediente.
Según los documentos de netlify, el _redirects
El archivo debe estar en su directorio raíz de construcción.
create-react-app de forma predeterminada crea todos los archivos de compilación en la carpeta denominada build
así que solo modifica el build scripts
en package.json
para agregar el _redirects
en la carpeta de compilación después de compilar la aplicación.
ejemplo.
"scripts": {
....
"build": "react-scripts build && echo '/* /index.html 200' | cat >build/_redirects ",
...
}
Si tiene varios redireccionamientos para facilitar las cosas, puede crear un _redirects
archivo con todas las redirecciones en su raíz (/
) carpeta de la CRA
luego en el package.json
se convertirá
"scripts": {
....
"build": "react-scripts build && cp _redirects build/_redirects",
...
}
asegúrese de que el comando de compilación en su netlify sea yarn run build
o npm run build
después de hacer los cambios en package.json
simplemente reconstruya su código.
ACTUALIZADO: mucho mejor manera
EN CRA (Create React App), el script de compilación copia todos los archivos en el directorio público a la carpeta de compilación, así que simplemente coloque el _redirectos con las reglas en el directorio público sin cambiar nada y listo.
Hay dos (2) formas de crear redireccionamientos cuando se aloja en Netlify.
-
_redirects
archivo en la raíz delpublish
directorio/build
en CRA) -
[[redirects]]
lista en elnetlify.toml
archivo de configuración en la raíz del repositorio (proyecto)
/public/_redirects
(Opción 1)
Pon el _redirects
en el /public
directorio. CRA copiará todos los archivos en /public
al directorio de compilación cuando se ejecuta el comando de compilación.
/public/_redirects
/* /index.html 200
/netlify.toml
(opcion 2)
Pon el netlify.toml
en la raíz/
) directorio de su proyecto (repositorio) que se está implementando en Netlify. Puede agregar las líneas de redireccionamiento al final del netlify.toml
si ya existe.
/netlify.toml
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false
Nota: Estas opciones se pueden combinar, pero recuerde _redirects
sobrescribirá una entrada con la misma ruta de origen (desde) en el netlify.toml
.
También puede utilizar la zona de juegos de redirecciones para convertir de un formato a otro.