React Router 和 React Router DOM 的区别

引言

在现代web开发中，单页应用（SPA）越来越受到欢迎。为了实现页面间的导航和状态管理，React Router成为了最流行的路由库之一。React Router 提供了动态路由的能力，使得开发者可以轻松地在React应用中进行页面导航。React Router有不同的实现版本，其中最常用的是 react-router 和 react-router-dom。虽然这两个库密切相关，但它们在设计目标和使用场景上存在一些显著的区别。本文将详细探讨这两个库的区别，以及它们各自的适用场景。

1. 基本概念

1.1 React Router

react-router 是 React 应用程序的核心路由库，提供了基本的路由功能。它支持定义路由、嵌套路由、路由参数、重定向等基本功能。react-router 本身是一个通用的路由库，适合用于多种环境，包括web、React Native等。

1.2 React Router DOM

react-router-dom 是基于 react-router 的一个专门针对浏览器环境的库。它扩展了 react-router 提供的功能，专门为Web应用提供了一些额外的组件和功能，例如 BrowserRouter、Link、NavLink、Route 和 Switch 等。这些组件使得在浏览器中处理路由变得更加简单和直观。

2. 依赖关系

2.1 独立性

• React Router：react-router 是一个通用的路由库，可以用于多种平台，包括Web、React Native等。它提供了核心的路由功能，但并不包含与DOM有关的特性。

• React Router DOM：react-router-dom 是构建于 react-router 之上的库，依赖于 react-router 的核心功能。它专注于Web环境，提供了一些Web特有的功能和组件。

2.2 安装方式

在使用时，开发者需要根据需要分别安装这两个库。例如，如果你只是需要核心路由功能，安装 react-router 即可。如果你在创建一个Web应用，则需要安装 react-router-dom。这可以通过npm或yarn轻松完成：

npm install react-router react-router-dom

3. 主要组件的区别

3.1 基础路由设置

• React Router：提供了基础的路由设置和管理功能。开发者可以使用 Router 组件来包裹应用程序，并在应用中定义路由和子路由。

• React Router DOM：提供了更为丰富的路由组件，主要用于Web应用。常用的组件包括：

  • BrowserRouter：使用HTML5的history API进行路由管理，适合Web应用。
  • HashRouter：利用URL的hash部分来进行路由，适合一些静态文件托管的场景。

import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* 其他组件 */}
    </Router>
  );
}

3.2 路由定义

• React Router：路由定义是基础的，可以使用 Route 组件来定义路径和对应的组件。

• React Router DOM：提供了非常友好的路由定义方式，开发者可以利用 Link 组件进行导航，利用 Route 组件定义路由，利用 Switch 组件来实现路由的独占匹配。

import { Route, Switch, Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
}

3.3 导航组件

• React Router：没有提供与DOM交互的导航组件。

• React Router DOM：提供了 Link 和 NavLink 组件，方便开发者在不同路由间导航。

  • Link 组件用于导航到不同的路由。
  • NavLink 组件用于创建导航链接，同时支持样式激活状态。

<NavLink to="/about" activeClassName="active">
  About
</NavLink>

4. 适用场景

4.1 使用 react-router

• 适用于需要在不同平台上使用同一套路由逻辑的项目，例如开发多平台的应用（Web、Mobile等）。
• 对于构建基于React的组件库、工具或内部应用中，可能不需要与DOM紧密结合的路由管理。

4.2 使用 react-router-dom

• 适用于创建Web应用程序，尤其是需要处理复杂路由逻辑（如嵌套路由、动态路由等）的场景。
• 当需要使用 BrowserRouter、Link、NavLink 等组件时，react-router-dom 是必不可少的选择。

5. 状态管理与路由

5.1 路由参数

• React Router：在路由中可以定义参数，并在相应的组件中获取这些参数。

• React Router DOM：提供了更加友好的获取路由参数的方式，通过 useParams 钩子可以快速获取当前路由的参数。例如：

import { useParams } from 'react-router-dom';

function User() {
  let { userId } = useParams();
  return <div>User ID: {userId}</div>;
}

5.2 路由守卫

• React Router：提供了基本的功能来控制路由，但没有内置的路由守卫。

• React Router DOM：可以通过条件渲染和 Redirect 组件来实现路由守卫逻辑，控制用户访问权限。

<Route
  path="/protected"
  render={() => (isAuthenticated ? <ProtectedComponent /> : <Redirect to="/login" />)}
/>

6. 生态系统的整合

6.1 Redux 和 React Router

在大多数 React 应用中，Redux 和 React Router 经常一起使用。Redux 主要用于状态管理，而 React Router 主要用于处理路由。它们可以通过 react-redux 进行结合，使得路由和全局状态结合得更加紧密。

6.2 Hooks 的使用

在 React Router 的新版本中，react-router-dom 提供了与 React Hooks 的结合，使得使用路由变得更加灵活。通过使用 useHistory、useLocation、useRouteMatch 等 hooks，开发者可以在函数组件中更方便地进行路由操作。

import { useHistory } from 'react-router-dom';

function MyComponent() {
  let history = useHistory();

  const handleClick = () => {
    history.push('/new-location');
  };

  return <button onClick={handleClick}>Go to new location</button>;
}

7. 总结

在React生态系统中，react-router 和 react-router-dom 是实现路由管理的两个重要库。理解它们之间的区别，对于开发高效的React应用具有重要意义。react-router 提供了通用的路由功能，而 react-router-dom 则为Web应用提供了丰富的路由组件和功能。根据开发需求选择合适的库，可以帮助开发者更好地管理路由，提高开发效率。通过结合 Redux 和 Hooks，React Router 的使用将变得更加灵活和强大，使得构建复杂的SPA应用变得简单而直观。