React 路由

¥React Router

虽然 Remix 可以作为多页应用运行，但在加载 JavaScript 时，它会使用客户端路由来获得完整的单页应用用户体验，并享受随之而来的速度和网络效率。

¥While Remix works as a multipage app, when JavaScript is loaded, it uses client side routing for a full Single Page App user experience, with all the speed and network efficiency that comes along with it.

Remix 构建于 React 路由 之上，并由同一团队维护。这意味着你可以在 Remix 应用中使用 React Router 的所有功能。

¥Remix is built on top of React Router and maintained by the same team. This means that you can use all the features of React Router in your Remix app.

这也意味着 Remix 的 90% 实际上只是 React Router：一个非常老旧、非常稳定的库，可能是 React 生态系统中最大的依赖。Remix 只需在其后添加一个服务器即可。

¥This also means that the 90% of Remix is really just React Router: a very old, very stable library that is perhaps the largest dependency in the React ecosystem. Remix simply adds a server behind it.

导入组件和钩子

¥Importing Components and Hooks

Remix 重新导出了 React Router DOM 中的所有组件和钩子，因此你无需自行安装 React Router。

¥Remix re-exports all the components and hooks from React Router DOM, so you don't need to install React Router yourself.

🚫 不要执行以下操作：

¥🚫 Don't do this:

import { useLocation } from "react-router-dom";

✅ 执行以下操作：

¥✅ Do this:

import { useLocation } from "@remix-run/react";

扩展行为

¥Extended Behavior

一些组件和钩子已扩展，可以与 Remix 的服务器渲染和数据获取功能配合使用。例如，Link 可以在 Remix 中预取数据和资源，而 React Router 版本则不能。

¥Some components and hooks have been extended to work with Remix's server-rendering and data fetching features. For example, Link can prefetch data and resources in Remix, where the React Router version cannot.

🚫 不要执行以下操作：

¥🚫 Don't do this:

import { Link } from "react-router-dom";

// this won't do anything
<Link prefetch="intent" />;

✅ 执行以下操作：

¥✅ Do this:

import { Link } from "@remix-run/react";

// this will prefetch data and assets
<Link prefetch="intent" />;