React JS路由异常：登出后无法访问登录与注册页面

你的问题出在路由保护组件的属性接收错误：PrivateRoute和PublicRoute定义时声明接收component参数，但实际使用时是通过子元素（<PublicRoute><Login /></PublicRoute>）传递组件的，导致组件无法正确渲染——登出后虽然user为null，但返回的component是undefined，所以登录/注册页面无法显示。

修复后的路由保护组件代码 #

import React, { useContext } from "react";
import { AuthContext } from "../context/auth";
import { Navigate, useLocation } from "react-router-dom";

const PrivateRoute = ({ children }) => {
  const { user } = useContext(AuthContext);
  const location = useLocation();
  
  if (!user) {
    return <Navigate to='/login' state={{ from: location }} />;
  }

  return children;
};

export const PublicRoute = ({ children }) => {
  const { user } = useContext(AuthContext);
  
  if (!user) {
    return children;
  }
  
  return <Navigate to='/dashboard' />;
};

export default PrivateRoute;

路由配置无需修改 #

你的路由配置写法是正确的，保持原代码即可：

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route
    path='/register'
    element={<PublicRoute><Register /></PublicRoute>}
  />
  <Route
    exact
    path='/login'
    element={<PublicRoute><Login /></PublicRoute>}
  />
  <Route
    exact
    path='/dashboard'
    element={<PrivateRoute><Dashboard /></PrivateRoute>}
  />
</Routes>

额外说明 #

在React Router v6中，推荐通过包裹子元素的方式实现路由保护，这种写法更符合v6的设计理念，也能避免属性传递不匹配的问题。修复后，登出时user为null，PublicRoute会正常渲染登录/注册组件；已登录时则会跳转到仪表盘页面，完全符合需求。

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