是什么原因导致此 React.js 应用程序中的路由无法保护？

我正在使用 React 18 和 Firebase 9 制作一个聊天应用程序。

聊天路由（即根应用程序）应该只有在身份验证后才能访问。

In App.js I have:

import { useContext } from 'react';
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
  Navigate
} from 'react-router-dom';
import RootLayout from './layouts/RootLayout';
import AuthLayout from './layouts/AuthLayout';
import Chat from './pages/Chat';
import Register from './pages/Register';
import Login from './pages/Login';
import { AuthContext } from './contexts/AuthContext';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index
        element={
          <ProtectedRoute>
            <Chat />
          </ProtectedRoute>
        } />

      <Route path="auth" element={<AuthLayout />}>
        <Route path="register" element={<Register />} />
        <Route path="login" element={<Login />} />
      </Route>
    </Route>
  )
);

function App() {
  const { currentUser } = useContext(AuthContext);

  const ProtectedRoute = ({ children }) => {
    if (!currentUser) {
      return <Navigate to="/auth/login" />;
    }
    return children
  };

  return (
    <RouterProvider router={ router } ProtectedRoute={ ProtectedRoute } />
  );
}

export default App;

In src\contexts\AuthContext.js I have:

import { createContext, useEffect, useState } from "react";
import { auth } from "../firebaseConfig";
import { onAuthStateChanged } from "firebase/auth";

export const AuthContext = createContext();
export const AuthContextProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState({});

  useEffect(() => {
    const unSubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
      console.log(user);
    });

    return () => {
      unSubscribe();
    };
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
};

我在index.js中使用AuthContextProvider：

import { AuthContextProvider } from './contexts/AuthContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <AuthContextProvider>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </AuthContextProvider>
);
reportWebVitals();

Chrome 控制台抛出此错误App.js:

Uncaught ReferenceError: ProtectedRoute is not defined

我究竟做错了什么？

UPDATE

这个版本的 App.js 抛出了一个React Hook "useContext" cannot be called at the top level error:

const { currentUser } = useContext(AuthContext);

const ProtectedRoute = ({ children, currentUser }) => {
  if (!currentUser) {
    return <Navigate to="/auth/login" />;
  }
  return children
};

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index
        element={
          <ProtectedRoute currentUser={ currentUser }>
            <Chat />
          </ProtectedRoute>
        } />

      <Route path="auth" element={<AuthLayout />}>
        <Route path="register" element={<Register />} />
        <Route path="login" element={<Login />} />
      </Route>
    </Route>
  )
);

export default function App() {
  return (
    <RouterProvider router={router} />
  );
}

在 App.js 的更新版本中，您进行了一些改进来处理 useContext 问题并将 currentUser 传递给 ProtectedRoute。但是，您仍然遇到 ProtectedRoute 未定义的问题。

让我们解决这个问题并进行必要的调整。 将 ProtectedRoute 函数移到 App 组件之外，以便在使用它之前对其进行定义。

const ProtectedRoute = ({ children, currentUser }) => {
  if (!currentUser) {
    return <Navigate to="/auth/login" />;
  }
  return children;
};

function App() {
  const { currentUser } = useContext(AuthContext);

  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<RootLayout />}>
        <Route
          index
          element={<ProtectedRoute currentUser={currentUser}><Chat /></ProtectedRoute>}
        />
        <Route path="auth" element={<AuthLayout />}>
          <Route path="register" element={<Register />} />
          <Route path="login" element={<Login />} />
        </Route>
      </Route>
    )
  );

  return (
    <RouterProvider router={router} />
  );
}
  export default App;

通过将 ProtectedRoute 移至 App 之外，它将在 JSX 中使用之前进行定义。

您现在在更新的代码中将 currentUser 作为 prop 传递给 ProtectedRoute。这允许 ProtectedRoute 访问 currentUser 并确定用户是否经过身份验证。

通过这些调整，错误应该得到解决，并且 ProtectedRoute 组件现在应该在您的 React 应用程序中定义并正常运行。