如何让ReactJS应用在桌面、移动设备上分别展示不同内容

• 第一步：确认依赖安装
  先检查你有没有安装react-device-detect依赖，没装的话在项目根目录执行命令：
  npm install react-device-detect 或者 yarn add react-device-detect

• 第二步：修正平板检测逻辑
  你当前用的MobileView组件默认只匹配手机设备，平板会被识别为桌面端，达不到你要的手机+平板都显示提示的需求。可以改用属性判断的方式灵活控制渲染逻辑，修改后的App.js代码如下：

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 { isMobile, isTablet } from "react-device-detect";
import { BrowserRouter as Router } from "react-router-dom";

function App() {
  // 手机和平板都显示不可用提示
  if (isMobile || isTablet) {
    return <MobileTablet />
  }

  // 桌面端渲染正常内容
  return (
    <Router>
      <Text />
      <div className="box">
        <Navbar />
        <Dropdown />
        <div className="box2">
          <Slider />
        </div>
      </div>
      <div className="box3">
        <Wallet />
      </div>
    </Router>
  );
}

export default App;

• 第三步：添加兜底适配逻辑（可选，推荐）
  为了避免设备检测库的识别误差，可以在全局CSS（App.css）里加媒体查询做双保险：

/* 屏幕宽度小于1024px时隐藏桌面内容，显示提示 */
@media (max-width: 1023px) {
  .desktop-content {
    display: none !important;
  }
  .mobile-hint {
    display: flex !important;
  }
}
/* 桌面端默认隐藏移动端提示 */
.mobile-hint {
  display: none;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
}

对应给MobileTablet组件加mobile-hint类名，桌面内容外层加desktop-content类名即可。

• 第四步：调试验证
  用Chrome/Firefox浏览器的设备仿真功能，选择手机或者平板设备后刷新页面，即可看到提示效果，直接缩放浏览器窗口不会触发userAgent检测，需要刷新后才会生效。

• 附录：MobileTablet组件参考实现
  如果你的MobileTablet组件还没写，可以参考下面的最简代码：

function MobileTablet() {
  return <div className="mobile-hint">SITE NOT AVAILABLE ON MOBILE</div>
}
export default MobileTablet;

内容的提问来源于stack exchange，提问作者user16659888