how can I add locked page before loading dashboard?-CodePudding

I am trying to build a locked page to display a message when users visit the web app from mobile and load a mobile page layout when a message like this mobile is not supported . I was thinking on using document.addEventListener('DOMContentLoaded', () => { , but not sure . if it's the best , but however where can I load this validation? the logic pseudo will be something to the following

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

index.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();

app.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;

CodePudding user response：

You add can a Wrapper (HoC) to your App (in index.js)

ReactDOM.render(
   <React.StrictMode>
      <MobileWrapper>
         <App />
      <MobileWrapper>
   </React.StrictMode>,
   document.getElementById('root')
);

The MobileWrapper should handle which to show the children props or "MobileLockout" component

function MobileWrapper({ children }}) {
   const isMobile = ..
   if (isMobile) return <MobileLocout />
   return children
}

CodePudding user response：

If check in App.js it is work

import logo from './logo.svg';
import './App.css';

function App() {
   if (tooSmall || isMobile) {
     return (
        <MobileLocout />
           )
  } else {
      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;