ReactJS配置用户和管理员两类路由出现空白页及移动端卡死如何解决？

根因分析 #

1. 重复嵌套BrowserRouter：App.js已声明全局路由实例，但UserRoute、AdminRoute内部又各自嵌套了一层BrowserRouter，导致路由上下文冲突，路由状态异常，出现页面空白、跳转失效问题，移动端性能不足时会直接触发页面冻结。
2. 路由匹配规则错误：App.js中UserRoute绑定了exact path="/"，导致UserRoute下的子路由（如/movies、/webshow等）无法命中匹配规则，访问时无对应组件渲染，出现空白页。
3. 初始化并发请求过多：App启动时一次性触发14个数据请求，移动端网络带宽有限，并发请求阻塞主线程，触发页面无响应。

修复步骤 #

步骤1：移除嵌套的BrowserRouter #

删除UserRoute.js、AdminRoute.js中最外层的<BrowserRouter>标签，全局仅保留App.js中的一个BrowserRouter实例。

步骤2：修正App.js路由匹配顺序 #

调整路由顺序，将前缀更长、更具体的/admin路由放在前面，UserRoute路由放在最后且移除exact限制，确保所有非/admin前缀的路由都能命中UserRoute的子规则。

步骤3：优化路径判断逻辑 #

UserRoute中判断是否隐藏导航/页脚的逻辑，直接用startsWith匹配/admin前缀，避免硬编码路径遗漏出错。

步骤4：优化初始化请求逻辑 #

将非首页必须的请求调整到对应页面组件内的useEffect触发，减少App启动时的并发请求量，降低移动端性能压力。

修正后代码示例 #

App.js #

import { BrowserRouter as Router, Route,Switch} from 'react-router-dom';
import { fetchSlider,fetchTrailer,fetchLastSlider, fetchLastTrailer } from './action/Trailer';
import { useEffect } from 'react';
import { useDispatch} from 'react-redux';

import AdminRoute from './AdminRoute';
import UserRoute from './UserRoute';
import { getMovies } from './action/Movies';
// 其余非首页请求迁移到对应页面触发

const App = () => {
  const dispatch=useDispatch()
  useEffect(()=>{
    // 仅保留首页必须的初始化请求
    dispatch(fetchSlider())
    dispatch(fetchTrailer())
    dispatch(fetchLastSlider())
    dispatch(fetchLastTrailer())
    dispatch(getMovies())
  },[dispatch])
  return (
    <Router>
      <Switch>
        <Route path='/admin' component={AdminRoute} />
        <Route path='/' component={UserRoute} />
      </Switch>
    </Router>
  );
};

export default App;

UserRoute.js（核心修改部分） #

// 移除BrowserRouter导入
import {Route, Switch,useLocation } from "react-router-dom";
// 其余导入保持不变

const UserRoute = () => {
    const {pathname}=useLocation()
    // 简化路径判断逻辑
    const isAdminPath = pathname.startsWith('/admin')
  return (
    <>
      {!isAdminPath && <Navbar />}
      <Switch>
        {/* 原有子路由规则全部保留 */}
        <Route exact path="/" component={Home} />
        <Route path='/search' component={SearchResult} />
        {/* 其余路由规则和原有逻辑完全一致 */}
        {!isAdminPath && <Route component={Error404} />}
      </Switch>
      {!isAdminPath && <Footer />}
    </>
  );
};

export default UserRoute;

AdminRoute.js（核心修改部分） #

// 移除BrowserRouter导入
import { Route, Switch, useRouteMatch, useLocation, Redirect } from "react-router-dom";
// 其余导入保持不变

const AdminRoute = () => {
  const user = JSON.parse(localStorage.getItem("Adminprofile"))
  const supAd = JSON.parse(localStorage.getItem('SupAd'))
  
  const { path } = useRouteMatch();
  const { pathname } = useLocation();
  
  const notshow = pathname === "/admin/signin" || pathname === "/admin/signup" || pathname==="/admin/pass";
  return (
    <>
      {user ? (
        <>
          {!notshow && <AdminNav />}
        <Switch>
          {/* 原有子路由规则全部保留 */}
          <Route exact path={`${path}`} component={Admin} />
          <Route path={`${path}/trending`} component={AdminMovies} />
          {/* 其余路由规则和原有逻辑完全一致 */}
        </Switch>
        </>
      ) : (notshow ? null : <Redirect to='/' /> ) }
      
      <Route path={`${path}/pass`} component={RegLog} /> 
      <Route path={`${path}/signin`} component={AdminLog} />
      
      <Route path={`${path}/signup`}>
        { supAd ? <AdminReg /> : <Redirect to='/' />} 
      </Route>
    </>
  );
};

export default AdminRoute;

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