React中基于MSAL认证实现受保护路由报错问题咨询

错误原因 #

React Router v6的<Routes>组件要求直接子元素必须是<Route>或<React.Fragment>，你自定义的ProtectedRoute不是标准<Route>组件，直接放在<Routes>下就会触发该报错。

解决方案 #

把ProtectedRoute改成路由元素的认证包装器，让它负责判断用户认证状态、触发登录逻辑，然后在<Route>的element属性中使用这个包装器。

1. 修改ProtectedRoute.jsx

调整组件逻辑，使其不再返回<Route>，直接处理认证状态并渲染目标组件：

import React, { useEffect, useState } from 'react';
import { Navigate } from 'react-router-dom';
import { useMsal, useIsAuthenticated } from '@azure/msal-react';

function ProtectedRoute({ children }) {
  const { instance } = useMsal();
  const isAuthenticated = useIsAuthenticated();
  const [popupOpened, setPopupOpened] = useState(false);

  useEffect(() => {
    const handleLogin = async () => {
      try {
        const account = await instance.handleRedirectPromise();
        if (account) {
          setPopupOpened(false);
        }
      } catch (e) {
        console.error(e);
      }

      const accounts = instance.getAllAccounts();
      if (!isAuthenticated && !popupOpened && accounts.length === 0) {
        try {
          await instance.loginPopup();
          setPopupOpened(true);
        } catch (e) {
          console.error(e);
        }
      }
    };

    handleLogin();
  }, [instance, isAuthenticated, popupOpened]);

  // 已认证则渲染目标页面组件
  if (isAuthenticated) {
    return children;
  }

  // 若不需要跳转/login，可移除Navigate，改为返回加载提示直到登录完成
  return <Navigate to="/" replace />;
}

export default ProtectedRoute;

2. 修改App.jsx的路由配置

在<Route>的element中用ProtectedRoute包裹需要保护的页面组件：

function App() {
  return (
    <>
      <div className="app">
        <Navigation />
        <Routes>
          <Route path="/" element={
            <ProtectedRoute>
              <Home/>
            </ProtectedRoute>
          } />
          <Route path="/about" element={
            <ProtectedRoute>
              <About/>
            </ProtectedRoute>
          } />
          <Route path="/dashboard" element={
            <ProtectedRoute>
              <Dashboard/>
            </ProtectedRoute>
          } />
          <Route path="/explore" element={
            <ProtectedRoute>
              <Explore/>
            </ProtectedRoute>
          } />
        </Routes>
      </div>
    </>
  );
}

export default App;

额外说明 #

• 若偏好ProtectedRoute接收element属性的写法，可将组件参数改为({ element })，认证通过时返回element即可，效果一致。
• 确保@azure/msal-react与react-router-dom版本兼容，避免依赖冲突。
• 未登录时如果不需要跳转，可删除<Navigate>，替换为加载提示（如<div>正在验证身份...</div>），等待登录弹窗完成。

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