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-router、react-router-dom 和 react-router-native。讓我們從第一個開始。

react-router 庫包含 react-router-dom 和 react-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 上看到它。