如何解决react-router-v6中RouterProvider的TypeError问题？

错误原因 #

你给RouterProvider传递的属性名写错了，应该是router而非route。

修正后的代码 #

import React from "react";
import ReactDOM from "react-dom/client";
import "../App.css";
import About from "./About";
import App from "../App";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
);

说明 #

在react-router-dom v6版本中，RouterProvider组件需要通过router属性传入路由配置实例（即你用createBrowserRouter创建的对象）。你之前写成route，导致组件无法正确读取路由实例，触发了读取state的未定义错误，最终页面无法渲染内容。

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