React-Router v6.4路由跳转失效及多Router报错问题求助

错误根源 #

当前代码存在两个核心问题：

1. 循环渲染+重复Router实例：你在createBrowserRouter里把<App />设为根路由的element，但App组件内部又渲染RouterProvider，这会导致App被反复渲染，同时多次创建Router实例，触发报错。
2. 子路由无渲染出口：根路由没有添加<Outlet />，就算路由配置正确，Movies组件也没地方显示。

修复步骤与代码修改 #

1. 调整App.jsx，作为布局组件

移除App里的路由配置，改为渲染子路由出口：

import "./App.css";
import { Outlet } from "react-router-dom";

function App() {
  return (
    <div>
      {/* 这里可以添加导航栏、页脚等公共布局元素 */}
      <Outlet /> {/* 子路由的组件会在这里渲染 */}
    </div>
  );
}

export default App;

2. 迁移路由配置到main.js

在main.js里直接创建路由并渲染RouterProvider，避免重复创建Router：

// Libraries
import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import Movies from "./components/Movies";

const appRouter = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "movies",
        element: <Movies />,
      },
    ],
  },
]);

const root = ReactDOM.createRoot(document.getElementById("root"));

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

修改说明 #

• 路由配置直接在入口文件main.js中定义，通过RouterProvider提供给整个应用，确保全局只有一个Router实例。
• App组件作为根布局，通过<Outlet />为子路由提供渲染位置，访问/movies时，Movies组件会自动替换Outlet的位置，实现路由跳转和组件加载。

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