React移动端重定向循环问题：iOS正常Android陷入循环求助

问题描述 #

我基于React开发的网站，通过react-device-detect的MobileView组件实现移动端跳转至m子域名。目前iOS设备可正常跳转，但Android设备会陷入重定向循环。

代码片段 #

import React from "react";
import Navbar from "./Navbar";
import Page from "./Page";
import Footer1 from "./Footer";
import "./style.css";
import Datenschutz from "./Datenschutz";
import { BrowserRouter as Router, Routes, Route, } from "react-router-dom";
import ScrollToTop from "./Router-Scripts/ScrollToTop"
import Impressum from "./Impressum";
import Kontakt from "./Kontakt";
import PageScrollProgressBar from "react-page-scroll-progress-bar";
import { Scrollbars } from 'react-custom-scrollbars-2';
import About from "./AboutUs";
import { BrowserView, MobileView, } from 'react-device-detect';
import { useEffect } from 'react';

function Redirect() {
  useEffect(() => {
    const timeout = setTimeout(() => {
      window.location.replace('https://m.wood-in-vision.com');
    }, 0);
    return () => clearTimeout(timeout);
  }, []);
  return <>Redirecting</>;
}


function App() {
  return (
    <div>
      <MobileView>
        <Redirect />
      </MobileView>
      <BrowserView>
        <PageScrollProgressBar color="#009900" bgColor="transparent" height="5.2rem" />
        <Scrollbars />
        <Router>
          <ScrollToTop />
          <Navbar />
          <ScrollToTop />
          <Routes>
            <Route path="/" element={<Page />} />
          </Routes>
          <ScrollToTop />
          <Routes>
            <Route path="/datenschutz" element={<Datenschutz />} />
          </Routes>
          <ScrollToTop />
          <Routes>
            <Route path="/impressum" element={<Impressum />} />
          </Routes>
          <ScrollToTop />
          <Routes>
            <Route path="/kontakt" element={<Kontakt />} />
          </Routes>
          <ScrollToTop />
          <Routes>
            <Route path="/about" element={<About />} />
          </Routes>
          <ScrollToTop />
          <Footer1 />
        </Router>
      </BrowserView>
    </div>
  )
}

export default App;

原因分析 #

1. 域名判断缺失：当前代码未检查当前域名是否已经是m子域名，若m站复用了同一套代码逻辑，会导致Android设备跳转后再次触发MobileView，进入循环。
2. 组件识别偏差：react-device-detect在部分Android浏览器（尤其是开启桌面模式的场景）下，可能重复判定设备为移动端，导致重定向触发条件一直成立。
3. 冗余延迟逻辑：使用setTimeout延迟0秒执行重定向无必要，可能引发组件渲染后重复触发跳转逻辑。

解决方案 #

方案1：增加域名校验，避免重复重定向 #

修改Redirect组件，仅在主域名环境下执行跳转：

function Redirect() {
  useEffect(() => {
    const currentHost = window.location.hostname;
    if (!currentHost.includes('m.')) {
      window.location.replace('https://m.wood-in-vision.com');
    }
  }, []);
  return <>Redirecting</>;
}

方案2：优化移动端检测逻辑 #

替换组件式判断，结合窗口宽度与User-Agent双重校验，降低误判概率：

import { useMemo } from 'react';

function App() {
  const isMobile = useMemo(() => {
    const userAgent = window.navigator.userAgent.toLowerCase();
    const isMobileOs = userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad');
    const isSmallScreen = window.innerWidth <= 768;
    return isMobileOs && isSmallScreen;
  }, []);

  const currentHost = window.location.hostname;
  const shouldRedirect = isMobile && !currentHost.includes('m.');

  return (
    <div>
      {shouldRedirect ? <Redirect /> : (
        <>
          <PageScrollProgressBar color="#009900" bgColor="transparent" height="5.2rem" />
          <Scrollbars />
          <Router>
            <ScrollToTop />
            <Navbar />
            <Routes>
              <Route path="/" element={<Page />} />
              <Route path="/datenschutz" element={<Datenschutz />} />
              <Route path="/impressum" element={<Impressum />} />
              <Route path="/kontakt" element={<Kontakt />} />
              <Route path="/about" element={<About />} />
            </Routes>
            <ScrollToTop />
            <Footer1 />
          </Router>
        </>
      )}
    </div>
  )
}

注：合并了多个Routes组件为一个，符合React Router v6的最佳实践。

方案3：排查m站代码逻辑 #

确认m子域名的网站未包含相同的重定向代码，避免双向触发跳转循环。

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