0

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>
  );
};
4
  • este error es comun, debes configurar tu servidor para que responda a todas las rutas con el 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...)
    – clay
    Commented el 18 jun. a las 22:53
  • Qué web-server usa tu hosting y cuál usas en local?
    – jachguate
    Commented el 19 jun. a las 0:53
  • Y lo que es el Hosting estoy utilizando donweb, tendria que averiguar que esta utilizando y en local yo el proyecto lo cree con vite y node js. y mediante visual studio lo ejecutaba.
    – Matias
    Commented el 19 jun. a las 3:06
  • Estimado @jachguate ahi averigue el hosting donde tengo alojada la web utiliza servidor web en Windows con IIS (Internet Information Services).
    – Matias
    Commented el 20 jun. a las 1:14

1 respuesta 1

0

ya lo pude solucionar tuve que crear un archivo web.config en mi hosting y colocar dentro el siguiente codigo.

!-- begin snippet: js hide: false console: true babel: false -->

   
    <?xml version="1.0"?>
    <configuration>
        <system.webServer>
            <rewrite>
                <rules>
                    <rule name="React Routes" stopProcessing="true">
                        <match url=".*" />
                        <conditions logicalGrouping="MatchAll">
                            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                        </conditions>
                        <action type="Rewrite" url="/" />
                    </rule>
                </rules>
            </rewrite>
        </system.webServer>
    </configuration>

<!-- end snippet -->
2
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 20 jun. a las 4:24
  • Genial que compartas la solución a tu problema. Te recuerdo que, cuando respondes a tu propia pregunta, le respondes a futuros navegantes que lleguen aquí tratando de resolver un problema similar, y por lo mismo, se pide que escribas la respuesta como si no fuera para ti, de manera que se pueda entender cuál era el problema o cómo el código que publicas lo resuelve. La explicación puede ser breve. Para más información lee Cómo responder.
    – jachguate
    Commented el 20 jun. a las 5:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.