虽然您的应用程序只使用一个路由器，但根据您的应用程序运行的环境，有多个路由器可用。本文件应帮助您确定要使用哪一个。
在 v6.4 中，引入了支持新的 数据 API 的新路由器
以下路由器不支持数据 API
我们建议您更新您的应用程序以使用 6.4 中的新路由器之一。数据 API 目前在 React Native 中不受支持，但最终应该会支持。
最简单、最快的更新到 v6.4 的方法是使用 createRoutesFromElements，这样您就不需要将 <Route> 元素转换为路由对象。
import {
createBrowserRouter,
createRoutesFromElements,
Route,
RouterProvider,
} from "react-router-dom";
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<Root />}>
<Route path="dashboard" element={<Dashboard />} />
{/* ... etc. */}
</Route>
)
);
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
我们建议所有 Web 项目使用 createBrowserRouter.
它使用完整的 URL，而不是在 history.pushState 标准化之前 Web 应用程序中常见的哈希 URL（#this/stuff）。完整的 URL 对 SEO 更好，对服务器渲染更好，并且与 Web 平台的其余部分更兼容。
如果您将应用程序托管在静态文件服务器上，则需要将其配置为将所有请求发送到您的 index.html，以避免出现 404 错误。
如果由于某种原因您无法使用完整的 URL，createHashRouter 是第二好的选择。
如果您对数据 API 不感兴趣，您可以继续使用 <BrowserRouter>，或者，如果您无法使用完整的 URL，则使用 <HashRouter>.
测试使用 React Router API 的组件最简单的方法是使用 createMemoryRouter 或 <MemoryRouter>，而不是您在应用程序中使用的需要 DOM 历史记录 API 的路由器。
一些 React Router API 在内部使用 fetch，该 API 仅从 Node.js v18 开始支持。如果您的项目使用 v17 或更低版本，您应该手动添加 fetch polyfill。一种方法是安装 whatwg-fetch 并将其添加到您的 jest.config.js 文件中，如下所示
module.exports = {
setupFiles: ["whatwg-fetch"],
// ...rest of the config
};
您将在 React Native 项目中使用 <NativeRouter>.
v6.4 中的数据 API 目前在 React Native 中不受支持，但最终应该会支持。
以下 API 是在 React Router 6.4 中引入的，并且仅在使用数据路由器时才有效
route.actionroute.errorElementroute.lazyroute.loaderroute.shouldRevalidateroute.handle<Await><Form><ScrollRestoration>useActionDatauseAsyncErroruseAsyncValueuseFetcheruseFetchersuseLoaderDatauseMatchesuseNavigationuseRevalidatoruseRouteErroruseRouteLoaderDatauseSubmitstartViewTransition 支持 Link 和 useNavigate