react-router-dom vs react-router
React 路由
React 路由 React 路由库是用于在 React 应用程序中实现客户端路由的工具。它们允许开发者创建单页应用（SPA），在不重新加载整个页面的情况下，根据用户的交互动态地改变页面内容。react-router 是一个核心库，提供了路由的基本功能，而 react-router-dom 则是为浏览器环境提供的扩展，包含了与 DOM 相关的路由组件和功能。
功能对比: react-router-dom vs react-router 环境支持 react-router-dom : react-router-dom 专为浏览器环境设计，提供了与 DOM 交互的组件和 API，例如 <Link>、<Route> 和 useHistory。它适合构建传统的 Web 应用程序。
react-router : react-router 适用于任何 JavaScript 环境，包括浏览器、服务器和移动设备。它提供了与环境无关的路由功能，适合需要跨平台支持的应用。
DOM 交互 react-router-dom : react-router-dom 提供了一系列与 DOM 交互的组件和工具，简化了链接、导航和历史记录管理。它包括 <Link>、<NavLink>、<BrowserRouter> 等组件，方便开发者快速集成路由功能。
react-router : react-router 不直接处理 DOM 交互，开发者需要自己实现与 DOM 相关的功能。它提供了路由逻辑和状态管理，但不包含任何与浏览器交互的组件。
链接组件 react-router-dom : react-router-dom 提供了 <Link> 和 <NavLink> 组件，方便在应用中创建导航链接。它们支持动态路径、样式和活动状态，增强了用户体验。
react-router : react-router 本身不提供链接组件，开发者需要自行实现链接功能。它专注于路由逻辑，而不是 UI 组件。
示例代码 react-router-dom : react-router-dom 示例代码
import { BrowserRouter, Route, Link } from 'react-router-dom';
const App = () => (
<BrowserRouter>
<nav>
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</BrowserRouter>
);
react-router : react-router 示例代码
import { Router, Route } from 'react-router';
import { createMemoryHistory } from 'history';
const history = createMemoryHistory();
const App = () => (
<Router history={history}>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
);
如何选择: react-router-dom vs react-router react-router-dom : 选择 react-router-dom 如果您正在构建一个浏览器应用程序，并且需要使用与 DOM 相关的组件和功能，例如链接、导航和浏览器历史记录管理。
react-router : 选择 react-router 如果您正在构建一个非浏览器环境的应用程序，例如 React Native，或者您只需要路由的核心功能，而不需要与 DOM 直接交互。
react-router-dom的README This package simply re-exports everything from react-router to smooth the upgrade path for v6 applications. Once upgraded you can change all of your imports and remove it from your dependencies:
-import { Routes } from "react-router-dom"
+import { Routes } from "react-router"
展开
