React路由权限异常：未登录时无法跳转至Login页面

需要根据用户登录状态展示对应页面：未登录时自动跳转至Login页面，且无法访问其他页面。但当前代码未达到预期：

• 当AuthProvider中user为null时，无法跳转至Login页面
• 将user设为字符串值时，可正常跳转至MainPage
  控制台报错：Matched leaf route at location "/" does not have an element or Component. This means it will render an with a null value by default resulting in an "empty" page

相关代码 #

App组件 #

function App() {
 const { user } = useAuth();

 return (
  <Router>
  <Routes>
    <Route path="/">
      {user ? (
        <>
          <Route index element={<MainPage></MainPage>} />
        </>
      ) : (
        <>
          <Route path="login" element={<Login />} />
        </>
      )}
    </Route>
  </Routes>
</Router>
 );
}

authProvider.js #

const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {
return (
  <AuthContext.Provider value={{ user: null }}>
    {children}
  </AuthContext.Provider>
 );
};

export default function useAuth() {
  return useContext(AuthContext);
}

index.js #

const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
 <AuthProvider>
   <App />
 </AuthProvider>
);

解决方案 #

问题根源 #

原代码的路由结构存在两个核心问题：

1. 当user为null时，根路由/下仅定义了login子路由，但访问/本身没有对应的渲染元素，导致控制台报错
2. 未设置自动重定向逻辑，未登录时访问/不会自动跳转到/login

修改后的代码 #

修改App组件，使用react-router-dom的Navigate组件实现重定向，并完善路由规则：

import { Navigate } from 'react-router-dom';

function App() {
  const { user } = useAuth();

  return (
    <Router>
      <Routes>
        {/* 未登录状态：仅允许访问/login，其他路由全部重定向到登录页 */}
        {!user ? (
          <>
            <Route path="/login" element={<Login />} />
            <Route path="*" element={<Navigate to="/login" replace />} />
          </>
        ) : (
          <>
            {/* 已登录状态：根路由渲染MainPage，禁止访问登录页 */}
            <Route path="/" element={<MainPage />} />
            <Route path="/login" element={<Navigate to="/" replace />} />
            {/* 在这里添加其他已登录用户可访问的路由，例如： */}
            {/* <Route path="/settings" element={<Settings />} /> */}
          </>
        )}
      </Routes>
    </Router>
  );
}

说明 #

• 未登录时，任何非/login的请求都会被重定向到登录页，确保未登录用户无法访问其他页面
• 已登录时，访问/login会被重定向到主页，避免重复登录
• 根路由/在两种状态下都有明确的渲染元素，彻底解决控制台报错问题

内容的提问来源于stack exchange，提问作者Captai-N