Tengo que clonar un sitio web usando ReactJs que solo funciona en el escritorio. Cuando se ve en una vista móvil o tableta... muestra "SITIO NO DISPONIBLE EN MÓVIL". Yo también quiero hacer eso... pero no funciona en mi sitio
import "./App.css"; import Navbar from "./components/Navbar"; import Text from "./components/Text"; import Slider from "./components/Slider"; import Wallet from "./components/Wallet"; import Dropdown from "./components/Dropdown"; import MobileTablet from "./components/MobileTablet"; import { BrowserView, MobileView } from "react-device-detect"; import { BrowserRouter as Router } from "react-router-dom"; function App() { return ( <> <BrowserView> <Router> <Text /> <div className="box"> <Navbar /> <Dropdown /> <div className="box2"> <Slider /> </div> </div> <div className="box3"> <Wallet /> </div> </Router> </BrowserView> <MobileView> <MobileTablet /> </MobileView> </> ); } export default App;Este es el código para App.js, la parte principal... ¿Puede alguien ayudarme a hacer que mi aplicación responda... ya que soy muy nuevo en esto? Si necesita otros códigos, por favor hágamelo saber.
Mire, puede usar un estado para monitorear la ventana gráfica de la ventana del cliente, luego un useEffect para cambiarlo. La propiedad window.innerWidth le da el ancho del cliente, y luego puede especificar que funcione solo bajo condiciones específicas:
import { useState, useEffect } from "react"; export default function App() { const [userIsDesktop, setUserIsDesktop] = useState(true); useEffect(() => { window.innerWidth > 1280 ? setUserIsDesktop(true) : setUserIsDesktop(false); }, [userIsDesktop]); return ( <div className="App"> {userIsDesktop ? <h1>i'm a desktop</h1> : <h1>i'm a mobile</h1>} </div> ); }puedes usar isMobile para renderizado condicional
import {isMobile} from 'react-device-detect'; ... if (isMobile) { return <MobileTablet /> } ``