React Router DOM 6.4：能否用<router />替代router传入RouterProvider？

不行，不能把RouterProvider router={router}改成RouterProvider router={<router />}的形式，原因很直接：

• router是通过createBrowserRouter（或createHashRouter这类路由创建函数）生成的路由配置对象，它包含了路由规则、对应元素、加载器等核心路由信息，这才是RouterProvider的router属性要求的合法参数类型。
• <router />这种写法是把router当作React组件来渲染，但实际上router并不是一个React组件——除非你自己定义了一个同名组件，但这和React Router生成的路由对象完全是两回事。这么写会直接触发React报错，比如提示'router' is not defined，或者因为尝试实例化非组件对象导致的钩子调用错误。

给个正确的使用示例参考：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './Home';

// 生成路由配置对象
const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
]);

// 正确的用法
function App() {
  return <RouterProvider router={router} />;
}

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