使用react-router导航URL变更但组件未渲染问题求助

你的问题不是React与React Router版本不兼容（React 18.2.0和React Router v6.9.0完全兼容），核心问题是路由配置逻辑错误：

你当前将Page2设为App组件的子路由，但App组件中没有渲染React Router v6要求的<Outlet />组件——这是承载子路由内容的专属容器，没有它，子路由组件就没有挂载的位置。同时从你的跳转需求来看，你需要的是页面切换效果，而非在HomePage下方嵌套显示Page2，因此更合理的是将两个页面设为同级路由。

具体修复步骤 #

方案一：调整为同级路由（推荐） #

修改index.tsx中的路由配置，让HomePage和Page2成为平级路由：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {
  createBrowserRouter,
  RouterProvider
} from 'react-router-dom';
import HomePage from './component/HomePage';
import Page2 from './component/Page2';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
  },
  {
    path: "/page2",
    element: <Page2 />,
  },
]);

root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

方案二：保留嵌套路由并添加Outlet #

如果你确实需要嵌套结构，修改App.tsx引入并渲染<Outlet />：

import React from 'react';
import './App.css';
import HomePage from './component/HomePage';
import { Outlet } from 'react-router-dom';

function App() {
  return (
    <div>
      <HomePage />
      {/* 子路由内容会渲染在此位置 */}
      <Outlet />
    </div>
  );
}

export default App;

注：此方式下访问/page2时，会同时显示HomePage和Page2的内容。

验证修复 #

修改完成后重启项目，点击按钮跳转时，URL变化的同时Page2组件会正常渲染。

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