一、 useRoutes
本质：Hook
版本：V6+
限制：需要配合BrowserRouter或者HashRouter进行使用
使用范围：在组件内部使用
返回值：得到路由匹配到的元素
二、createBrowserRouter
本质：函数
版本：V6.4+
限制：不需要配合BrowserRouter或者HashRouter进行使用，但是需要配合RouterProvider
使用范围：在组件外部创建路由配置
返回值：得到路由匹配到的元素
三、对比优缺点
useRoutes：简单、灵活，适合基础路由，但是不支持数据加载(loader)和错误处理(errorElement)
createBrowserRouter：功能更强，支持数据加载、错误处理等，适合复杂应用
四、代码示例：
useRouter:
function Router() { return useRoutes([ { path: "/", element: <Layout />, children: [ {const router = createBrowserRouter([ { path: "/", element: <Layout />, children: [ { path: "home", element: <Home />, loader: async () => { // 加载数据 return await fetchHomeData(); }, errorElement: <ErrorBoundary />, }, ], }, ]); path: "home", element: <Home /> }, ], }, ]); }
import { BrowserRouter as Router } from "react-router-dom"; root.render( <Router> {/* 需要 BrowserRouter */} <App /> </Router> );
createBrowserRouter:
const router = createBrowserRouter([ { path: "/", element: <Layout />, children: [ { path: "home", element: <Home />, loader: async () => { // 加载数据 return await fetchHomeData(); }, errorElement: <ErrorBoundary />, }, ], }, ]);
import { RouterProvider } from "react-router-dom"; import router from "./router/index"; function App() { return <RouterProvider router={router} />; // 不需要 BrowserRouter }
