React路由配置参考（记录）

整体：

1. 登录页单独处理：将登录页单独处理，路径为 /login。
2. 使用 AuthLayout 处理授权页面：AuthLayout 可以作为一个高阶组件，确保用户登录后才能访问系统中的其他页面。
3. 加载主布局 BasicLayout：BasicLayout 可以用来加载系统的主布局，并通过 routesRender(routesConfig) 渲染配置文件中的子路由。

// AuthLayout.js
import { Navigate, Outlet } from 'react-router-dom';

const AuthLayout = () => {
  const isLoggedIn = localStorage.getItem('isLoggedIn'); // 通过localStorage检查是否登录

  if (!isLoggedIn) {
    return <Navigate to="/login" replace />; // 未登录，重定向到登录页面
  }

  return (
    <div>
      {/* 渲染子路由 */}
      <Outlet />
    </div>
  );
};

export default AuthLayout;

// BasicLayout.js
import React from 'react';
import { Outlet } from 'react-router-dom';

const BasicLayout = () => {
  return (
    <div>
      {/* 这里可以放导航栏或侧边栏 */}
      <h1>系统主界面</h1>
      <Outlet /> {/* 渲染子路由 */}
    </div>
  );
};

export default BasicLayout;

下面是路由配置：

import { createBrowserRouter, Navigate } from 'react-router-dom';
import LoginPage from './LoginPage';
import AuthLayout from './AuthLayout';
import BasicLayout from './BasicLayout';
import routesRender from './routesRender'; // 假设这是一个用于渲染路由的函数
import routesConfig from './routesConfig'; // 路由配置

const router = createBrowserRouter([
  {
    path: '/login',
    element: <LoginPage />, // 登录页
  },
  {
    path: '/', // 授权布局
    element: <AuthLayout />, // 检查用户是否登录
    children: [
      {
        path: '/', // 主布局
        element: <BasicLayout />,
        children: routesRender(routesConfig), // 渲染路由配置
      },
    ],
  },
]);

export default router;

逻辑说明

1. /login 路由加载登录页面。
2. AuthLayout 负责检查用户的登录状态，如果未登录，则重定向到 /login。
3. BasicLayout 渲染主界面布局，并通过子路由渲染实际的页面内容。

这样配置后，进入系统时会先进入登录页面，登录成功后才能访问其他页面，未登录的用户无法访问受保护的页面。