Estoy tratando de crear una página bloqueada para mostrar un mensaje cuando los usuarios visitan la aplicación web desde el móvil y cargar un diseño de página móvil cuando mobile is not supported . Estaba pensando en usar document.addEventListener('DOMContentLoaded', () => { , pero no estoy seguro. Si es el mejor, pero ¿dónde puedo cargar esta validación? La pseudo lógica será algo como lo siguiente

 if (tooSmall || isMobile) { ReactDOM.render(<MobileLockout />); } else { ReactDOM.render(<Root/>); }

índice.js

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) reportWebVitals();

aplicación.js

 import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;