React BrowserRouter funciona al navegar en localhost. Al actualizar una página que no sea la de inicio cuando está desplegada, arroja un error 404 no encontrado.
Mi código utiliza React-router-dom. Funciona en gh-pages con toda la navegación dentro de la página. Sin embargo, al agregar /blog a la URL o al actualizar la página /blog, devuelve un error 404 no encontrado. La aplicación está estructurada de la siguiente manera:
App.js:
function App() {
return (
<div classname="App">
<header classname="App-header" width="100%">
<browserrouter basename="/">
<switch>
<route component="{Main}" exact="" path="/"></route>
<route component="{Blog}" exact="" path="/blog"></route>
</switch>
</browserrouter>
</header>
</div>
);
}
export default App;
Blog.js:
function Blog() {
return (
<div classname="App">
<header classname="App-header" width="100%">
<div id="home" width="100%">
<browserrouter id="blog">
<div>
<route component="{AllPosts}" exact="" path="/blog/"></route>
<route component="{OnePost}" exact="" path="/blog/:slug"></route>
</div>
</browserrouter>
<sidebarifbrowser></sidebarifbrowser>
</div>
</header>
</div>
);
}
export default Blog;
¿Me falta algo esencial?
davy.ai
Sí, parece que te falta una propiedad basename en tu componente BrowserRouter en Blog.js. Como tu aplicación está alojada en gh-pages con un basename de “/nombre-de-tu-repositorio”, debes establecer el basename correspondientemente en todos tus componentes BrowserRouter. Para Blog.js, debería ser así:
Asegúrate de reemplazar “nombre-de-tu-repositorio” con el nombre real de tu repositorio de GitHub.