Buenas Cree una página web con Vite React js. Utilice react router dom para navegar dentro de la web. En el local host todo funciona perfecto, pero cuando mando a producción y subo la web al hosting, carga la web perfecto pero si refrescas la web y no estás en home arroja un error 404. Estuve buscando soluciones pero no me han funcionado y no quería usar el # ya que no queda estético a la vista. Vi que se puede hacer algo desde el backend pero no logré que funcionara, si alguien me puede ayudar se lo agradezco les dejo el codigo para que lo vean.
App
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { useState } from "react";
import { Header } from "./components/headers/header";
import { Toggle } from "./components/Toggle/Toggle";
import { HomePage } from "./routes/home";
import { ProductsPage } from "./routes/products";
import { MasServiciosPage } from "./routes/masServicios";
import { NosotrosPage } from "./routes/nosotros";
import { ContactPage } from "./routes/contact";
import { NotFoundPage } from "./routes/notFoundPage";
import { Footer } from "./components/footer/footer";
import "./app.css";
import { ScrollUp } from "./components/scrollUp/scrollUp";
import { WhatsApp } from "./components/whatsApp/whatsApp";
import CookiePolicy from "./components/politicadePrivacidad/policadaDePrivacidad";
function App() {
const [isDark, setIsDark] = useState(false);
return (
<div className="App" data-theme={isDark ? "dark" : "light"}>
<Toggle isChecked={isDark} handleChange={() => setIsDark(!isDark)} />
<Router>
<Header />
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/home" element={<HomePage />} />
<Route path="/products" element={<ProductsPage />} />
<Route path="/masServicios" element={<MasServiciosPage />} />
<Route path="/nosotros" element={<NosotrosPage />} />
<Route path="/contact" element={<ContactPage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
<CookiePolicy />
<ScrollUp />
<WhatsApp />
<Footer />
</Router>
</div>
);
}
export default App;
Componente menu
import './estyles/menu.css';
import { NavLink } from "react-router-dom";
export const Menu = () => {
return (
<>
<NavLink className='menu__Item--a' to='/products' ><li className='menu__Item'>Productos </li></NavLink>
<NavLink className='menu__Item--a' to='/masServicios' ><li className='menu__Item'>Mas Servicios</li></NavLink>
<NavLink className='menu__Item--a' to='/nosotros'> <li className='menu__Item'> Nosotros</li></NavLink>
<NavLink className='menu__Item--a' to='/contact' ><li className='menu__Item'>Contacto</li></NavLink>
</>
)
}
Header
import { Logo } from "./logo";
import "./estyles/header.css";
import { Menu } from "./menu";
import { Hamburgers } from "./hamburgers";
import { useState } from "react";
export const Header = () => {
const [menu, setMenu] = useState(false)
const toggleMenu =()=>{
setMenu(!menu)
}
return (
<header>
<div className="conteinerLogo">
<Logo />
</div>
<div className="conteinerHamburgers" onClick={toggleMenu}>
<Hamburgers/>
</div>
<nav className={`navbar ${menu ? 'isActive' :'' }`}>
<ul>
<Menu/>
</ul>
</nav>
</header>
);
};
index.html
ya que en react (single page app) NO hay un archivo html por cada ruta, sino que el mismo index.html maneja todas las rutas... en otras palabras /menu no tiene un archivo menu.html (por eso el error 404). Dependiendo de tu server busca en google como configurar react en tu server (nginx, apache, s3...)