React 路由与 React 路由 DOM

Irakli Tchigladze 2022年5月18日
React 路由与 React 路由 DOM

React 是一个使用可重用组件构建动态、视觉上吸引人的 UI 的库。它不是一个包含路由和其他高级功能的成熟框架。

如果你在 React 中构建高级应用程序,你将需要一个适当的系统来在页面之间导航。你必须安装一个名为 React Router 的单独库来将此功能添加到你的 React 应用程序。

安装 React Router 库的 React 开发人员经常感到困惑,不知道要安装 react-router 包还是 react-router-dom。两者在很多方面相似,但也不同。

本文将对它们进行比较,以帮助你确定你需要哪一个。

React Router 与 React 中的 React Router DOM

React 开发人员有三个看似相同的库可供选择:react-routerreact-router-domreact-router-native。让我们从第一个开始。

react-router 库包含 react-router-domreact-router-native 库中的所有功能和自定义组件。你可以将其视为一个广泛的库,它结合了两个更具体的库。

react-router-native 是为 React Native 构建的,这是一个在 React 中构建移动应用程序的框架。

另一方面,react-router-dom 是你需要向 React 中构建的 Web 应用程序添加路由功能的库。如果你正在为浏览器构建一个 React 应用程序,那么 react-router-dom 就是你所需要的。

除了主 react-router 库的所有自定义组件外,react-router-dom 还包括以下组件:<BrowserRouter><Link> 组件的改进版本,以及 <NavLink> 自定义组件,你可以使用它自动设置 active 导航项的样式。

在大多数情况下,你不必导入主 react-router 库。

让我们从 react-router-dom 包中导入自定义 Link 组件并将其记录到控制台。

import { Link } from "react-router-dom";
export default function App() {
  console.log(Link);
  return <div className="App">Sample app</div>;
}

这是控制台中的 Link 组件的外观。

链接

你可以在 codesandbox 上看到它。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相关文章 - React Router