React Router 6.10组件未渲染及路由跳转失效问题排查

你的代码存在三个关键问题，导致路由功能异常：

• Root组件缺少子路由出口
  嵌套路由的父组件必须通过<Outlet />来渲染子路由内容，否则Home、Invites组件没有挂载的位置，自然无法显示。

• 多路由上下文冲突
  你已经通过RouterProvider使用了BrowserRouter，却又给Link单独套了MemoryRouter。两个独立的路由上下文互不影响，点击Link当然不会触发跳转。

• 子路由路径写法错误
  父路由路径是/，子路由写成/invt绝对路径会脱离嵌套关系，应该改为相对路径invt。

修正后的完整代码：

import Home from './pages/Home.js'
import Invites from './pages/Invites.js'
import { createBrowserRouter, createRoutesFromElements, Route, Link, RouterProvider, Outlet } from 'react-router-dom'
import './App.css';

const Root = () => {
  return (
    <>
      <h1>Is it working?</h1>
      {/* 渲染子路由内容的出口 */}
      <Outlet />
      {/* 将导航链接放在Root组件中，共享同一路由上下文 */}
      <Link to="invt">Invitations</Link>
    </>
  )
}

function App() {
  const router = createBrowserRouter(createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route index element={<Home />} />
      {/* 子路由使用相对路径 */}
      <Route path="invt" element={<Invites />} />
    </Route>
  ))
  
  return (
    <RouterProvider router={router} />
  );
}

export default App;

修改后效果：

• Root组件始终渲染，同时通过Outlet展示Home或Invites的内容
• 根路径localhost:3000会显示Root + Home组件
• 点击Invitations链接会跳转到/invt，显示Root + Invites组件
• 手动访问localhost:3000/invt也能正常渲染对应组件

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