0
211
ViewsReactJS: obtener 404 cuando se abre una página / acerca de
Esta es la primera vez que implemento una aplicación web React en el alojamiento de Firebase. En mi archivo index.html solo tengo el div raíz:
<body> <div id="root" class="container"></div> </body> Eso es todo lo que hay en el cuerpo. Luego tengo un index.js en la carpeta src en la que tengo:
import { BrowserRouter as Router, Route } from "react-router-dom";' import HomeScreen from "./screens/HomeScreen"; import AboutScreen from "./screens/AboutScreen"; ... ReactDOM.render( <Router> <div> <Route exact path="/" component={HomeScreen} /> <Route exact path="/about" component={AboutScreen} /> </div> </Router>, document.getElementById("root"))Luego, para abrir la página Acerca de, la he vinculado como:
import { Container, Nav, Navbar } from 'react-bootstrap'; ... <Nav.Link href="/about">About</Nav.Link> Cuando npm run build y luego firebase deploy , se implementa y puedo ver los cambios en la página de inicio. Pero cuando hago clic en about me da 404
Tengo la carpeta llamada build , que es la carpeta pública y, después de la compilación, solo tiene index.html y 404.html y una carpeta static/js que tiene algunos js y txt generados.
Por lo tanto, no estoy seguro de por qué obtengo 404. En dev build, es decir, localhost , la navegación funciona bien.
2 answers
Answer question0
Para aplicaciones de una sola página, se deben especificar reglas de redirección. Todas las rutas deben redirigirse desde el archivo index.html
Debe especificar el directorio de implementación que se está implementando y las reglas de redirección
Esta es mi aplicación de reacción que se implementa en el alojamiento de firebase junto con las funciones de firebase
{ "hosting": { "public": "build", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] }, "firestore": { "rules": "firestore.rules", "indexes": "firestore.indexes.json" } }0
Esto se debe a que es una implementación estática de un solo index.html , about.html no existe, solo puede acceder a index.html, y las otras vistas "no" porque es una aplicación de una sola página, pero puede redirigir todas las URL que no sean "/" al archivo index.html , editando firebase.json
"rewrites": [ { "source": "**", "destination": "/index.html" } ]