如何在加载仪表板之前添加锁定的页面？

Question

我正在尝试构建一个锁定页面以在用户从移动设备访问网络应用程序时显示一条消息，并在出现这样的消息时加载移动页面布局 mobile is not supported。我正在考虑使用 document.addEventListener('DOMContentLoaded', () => { ，但不确定。如果它是最好的，但是我可以在哪里加载此验证？逻辑伪将是以下内容

 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;

Answer 1

您可以将包装器 (HoC) 添加到您的应用程序（在 index.js 中）

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

MobileWrapper 应该处理显示子道具或“MobileLockout”组件的问题

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

Answer 2

如果签到 App.js 就是工作

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;

如何在加载仪表板之前添加锁定的页面？

how can I add locked page before loading dashboard?

javascript

typescript

reactjs

tsx