React-Router-Dom Outlet不显示组件及NotFound问题求助

我有一个包含Header、AdminLinks、Main、Status四个组件的ProtectedRoute组件，其中Main组件内使用<Outlet />，用于渲染路由指定的子组件；AdminLinks通过SideNav渲染侧边导航链接。

在App组件中，我用createBrowserRouter配置路由：未登录时显示Login路由，登录后ProtectedRoute作为父路由，包含Home（默认路由）和CoursesAdmin等子路由。

点击侧边导航时，子组件无法在Main的Outlet中渲染，反而抛出「页面未找到（NotFound）」错误，期望点击导航时能在Main内渲染对应路由组件。

相关代码 #

ProtectedRoute组件 #

const ProtectedRoute = () => {
  return (
    <>
      <Header />
      <div className='flex h-screen overflow-hidden'>
        <div className="md:block hidden fixed top-[25%] ml-2 opacity-80 hover:opacity-100">
          <AdminLinks />
        </div>
        <div className="w-3/4 overflow-auto">
          <div className='h-full p-4'>
            <Main/>
          </div>
        </div>
        <div className='w-1/4 overflow-auto'>
          <Status/>
        </div>
      </div>
    </>
  )
}

AdminLinks组件 #

const AdminLinks = (props) => {
  return (
    <>
      {userLinks.map((nav) => (
        <SideNav
          key={nav.id}
          id={nav.id}
          link={nav.link}
          icon={nav.icon}
          title={nav.title}
          classname={props.classname}
        />
      ))}
    </>
  )
}

Main组件 #

const Main = () => {
  return (
    <div className="w-full flex flex-col justify-start ml-4 px-4">
      <Outlet />
    </div>
  )
}

App组件 #

import CoursesAdmin from './components/administrator/CoursesAdmin'

function App() {
  const [isLog, setisLog] = useState(false);
  const routes = createBrowserRouter(
    createRoutesFromElements(
      isLog ?
        <Route path="/" element={<Login />}>
          <Route path="login" element={<Login />} />
        </Route>
        :
        <Route path="/" element={<ProtectedRoute />}>
          <Route index element={<Home />} />
          <Route path="courses" element={<CoursesAdmin />} />
        </Route>
    )
  );
  return (
    <RouterProvider router={routes} />
  )
}

问题排查与修复 #

1. 路由判断逻辑完全反转 #

你的App组件中，isLog代表登录状态，但当前路由判断逻辑与需求完全相反：

• 原逻辑：isLog为true时显示Login路由，false时显示ProtectedRoute
• 正确逻辑：isLog为true时渲染ProtectedRoute（登录后页面），false时渲染Login（未登录页面）

修复后的App组件代码：

import CoursesAdmin from './components/administrator/CoursesAdmin'

function App() {
  const [isLog, setisLog] = useState(false);
  const routes = createBrowserRouter(
    createRoutesFromElements(
      // 反转判断逻辑，匹配登录状态对应路由
      isLog ?
        <Route path="/" element={<ProtectedRoute />}>
          <Route index element={<Home />} />
          <Route path="courses" element={<CoursesAdmin />} />
        </Route>
        :
        <Route path="/" element={<Login />}>
          <Route path="login" element={<Login />} />
        </Route>
    )
  );
  return (
    <RouterProvider router={routes} />
  )
}

2. 修复导航链接的路由兼容性 #

原生<a>标签会触发页面刷新，破坏React Router的单页路由机制，必须使用React Router提供的<Link>组件：

方案1：在AdminLinks中传递Link组件

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

const AdminLinks = (props) => {
  return (
    <>
      {userLinks.map((nav) => (
        <SideNav
          key={nav.id}
          id={nav.id}
          // 传递Link组件而非纯路径字符串
          link={<Link to={nav.link}>{nav.title}</Link>}
          icon={nav.icon}
          title={nav.title}
          classname={props.classname}
        />
      ))}
    </>
  )
}

方案2：在SideNav内部使用Link组件

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

const SideNav = ({ link, icon, title, classname }) => {
  return (
    <Link to={link} className={classname}>
      {icon}
      <span>{title}</span>
    </Link>
  )
}

3. 验证路由路径匹配 #

确保userLinks数组中的link字段与路由配置完全一致：

• 比如CoursesAdmin的路由是path="courses"，则link值应为"/courses"

额外排查点 #

• 确认使用的是React Router v6+版本（createBrowserRouter、Outlet均为v6 API）
• 可添加NotFound路由排查匹配问题：

<Route path="/" element={<ProtectedRoute />}>
  <Route index element={<Home />} />
  <Route path="courses" element={<CoursesAdmin />} />
  <Route path="*" element={<div>页面未找到</div>} />
</Route>

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