Skip to main content
Formato de código
Origen Enlace
jachguate
  • 32.1k
  • 8
  • 41
  • 69
```    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**

    ```

    

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**
```    

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>
  );
};
```
```    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>
  );
};
```
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>
  );
};
Origen Enlace

Error 404 al refrescar la web utilizando React Router Dom

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>
  );
};
```