React Router替代方案、路由权限控制及自定义路由优化咨询

嘿，很高兴看到你已经在自定义路由上积累了不少实践经验！针对你的问题，我来分享一些实用的方案👇

如果你觉得React Router在复杂嵌套场景下维护起来有点繁琐，可以试试这些选项：

• Reach Router：由React Router核心团队成员开发，API设计更简洁直观，嵌套路由的处理逻辑更符合直觉，而且对无障碍支持做得非常到位，适合需要精细路由控制的应用。
• Next.js 内置路由系统：不管是App Router的文件系统路由，还是Page Router的传统路由模式，都能极大减少手动维护路由的工作量——文件结构就是路由结构，嵌套层级一目了然。对于多模板场景（仪表盘、后台、商城等），直接用目录划分（比如/app/dashboard、/app/admin、/app/store）就能清晰隔离不同模块，非常整洁。
• TanStack Router：前身是React Location，性能拉满，支持自动代码分割、嵌套路由懒加载，还内置了路由守卫和状态管理能力，大型应用里处理大量路由时会更高效。

结合你提到的auth、roles需求，以及函数组件+hooks的技术栈，这些方案会更适配：

1. 集中式路由元数据管理（优化你之前的路由数组思路） #

把所有路由配置集中在一个（或拆分到多个模块）文件里，给每个路由对象加上auth、roles、layout（对应不同模板）属性，然后写一个统一的路由渲染函数，自动筛选权限匹配的路由并套上对应布局。

示例代码：

// 路由配置文件：src/routes/index.js
import Home from '../pages/Home';
import Dashboard from '../pages/Dashboard';
import AdminPanel from '../pages/AdminPanel';
import PublicLayout from '../layouts/PublicLayout';
import DashboardLayout from '../layouts/DashboardLayout';
import AdminLayout from '../layouts/AdminLayout';

export const routes = [
  {
    path: '/',
    component: Home,
    auth: false,
    layout: PublicLayout
  },
  {
    path: '/dashboard',
    component: Dashboard,
    auth: true,
    roles: ['user', 'admin'],
    layout: DashboardLayout
  },
  {
    path: '/admin',
    component: AdminPanel,
    auth: true,
    roles: ['admin'],
    layout: AdminLayout
  }
];

// 路由渲染组件：src/components/AppRoutes.jsx
import { useAuth } from '../hooks/useAuth';
import { Routes, Route, Navigate } from 'react-router-dom';

const AppRoutes = () => {
  const { isAuthenticated, user } = useAuth();

  // 筛选符合当前用户权限的路由
  const accessibleRoutes = routes.filter(route => {
    // 公开路由直接通过
    if (!route.auth) return true;
    // 未登录用户排除需要认证的路由
    if (!isAuthenticated) return false;
    // 检查角色是否匹配
    if (route.roles && !route.roles.includes(user?.role)) return false;
    return true;
  });

  return (
    <Routes>
      {accessibleRoutes.map((route, idx) => {
        const Layout = route.layout || React.Fragment;
        const Component = route.component;
        return (
          <Route
            key={idx}
            path={route.path}
            element={
              <Layout>
                <Component />
              </Layout>
            }
          />
        );
      })}
      {/* 处理未登录访问受限路由的跳转 */}
      <Route
        path="/login"
        element={isAuthenticated ? <Navigate to="/dashboard" /> : <Login />}
      />
      {/* 权限不足的兜底页面 */}
      <Route path="/403" element={<AccessDenied />} />
    </Routes>
  );
};

2. 细粒度权限控制Hooks #

封装专门的权限Hooks，在组件或路由层面灵活使用，比switch/三元运算符更易维护：

// src/hooks/useRequireAuth.js
import { useEffect } from 'react';
import { useAuth } from './useAuth';
import { useNavigate } from 'react-router-dom';

export const useRequireAuth = () => {
  const { isAuthenticated } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuthenticated) navigate('/login');
  }, [isAuthenticated, navigate]);

  return isAuthenticated;
};

// src/hooks/useRequireRole.js
import { useEffect } from 'react';
import { useAuth } from './useAuth';
import { useNavigate } from 'react-router-dom';

export const useRequireRole = (requiredRoles) => {
  const { isAuthenticated, user } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login');
      return;
    }
    if (!requiredRoles.includes(user?.role)) navigate('/403');
  }, [isAuthenticated, user, requiredRoles, navigate]);

  return isAuthenticated && requiredRoles.includes(user?.role);
};

// 使用示例
const AdminPanel = () => {
  const hasAccess = useRequireRole(['admin']);
  if (!hasAccess) return <LoadingSpinner />;
  return <div>管理员后台</div>;
};

3. 按模块拆分路由（解决路由杂乱问题） #

当路由数量太多时，不要把所有路由堆在一个文件里，按业务模块拆分：

// src/routes/public.js
export const publicRoutes = [/* 公开路由配置 */];

// src/routes/dashboard.js
export const dashboardRoutes = [/* 仪表盘相关路由 */];

// src/routes/admin.js
export const adminRoutes = [/* 管理员后台路由 */];

// 主路由文件合并
import { publicRoutes } from './public';
import { dashboardRoutes } from './dashboard';
import { adminRoutes } from './admin';

export const routes = [...publicRoutes, ...dashboardRoutes, ...adminRoutes];

你之前尝试的路由数组筛选思路非常棒，继续优化的话加上layout属性能自动适配不同模板，避免重复写嵌套布局；switch和三元运算符在简单场景下高效，但复杂权限+多模板场景下，集中式筛选+守卫组件的方式更易维护。

另外，你用函数组件+hooks完全没问题——现在React生态的路由和权限方案几乎都是优先支持函数组件的，hooks的方式比类组件的HOC更灵活，能让权限逻辑和路由逻辑解耦，代码更清爽。

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