28 React Router简介之React Router的安装与配置

在上一篇文章中，我们讨论了高阶组件的概念，以及如何利用高阶组件来增强我们的React组件。在这篇文章中，我们将进入一个重要的主题——React Router，这是一个用来处理React应用中的路由和导航的强大库。

什么是React Router？

React Router是一个常用的库，它能让我们在React应用中创建和管理路由。通过路由，我们可以在单页面应用中实现不同的视图而无需重新加载页面，比如在一个电商网站中，我们希望在不同的商品页面之间进行切换，而不是每次都去请求新的页面。

安装React Router

要开始使用React Router，首先我们需要将它安装到我们的项目中。确保你已经在项目根目录下打开了命令行工具，然后使用以下命令进行安装：

npm install react-router-dom

这里我们使用了react-router-dom，因为它是适用于Web应用的版本。

配置React Router

安装完成后，我们需要在应用中配置路由。下面是一个简单的例子，演示如何在React组件中设置路由。

首先，我们需要导入BrowserRouter、Route和Link组件。BrowserRouter是用于创建路由的顶层组件，Route用于定义每个路由，而Link用于创建导航链接。

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <h2>首页</h2>;
const About = () => <h2>关于我们</h2>;
const Contact = () => <h2>联系我们</h2>;

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/about">关于我们</Link>
            </li>
            <li>
              <Link to="/contact">联系我们</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
}

export default App;

在这个例子中，我们定义了三个基本组件：Home、About和Contact，它们分别代表不同的页面内容。

如何工作？

1. BrowserRouter包裹着整个应用，提供了路由的上下文。
2. 使用Link组件创建链接，点击这些链接，将会导航到不同的路由而不需要整个页面的刷新。
3. Route组件根据路径匹配来显示不同的组件。exact属性确保首页只在路径完全匹配时渲染。

注意事项

• 确保要在应用的最外层使用BrowserRouter，这样才能确保路由功能正常工作。
• 使用Link组件而不是传统的<a>标签可以避免页面刷新，从而提供更快的用户体验。

通过以上的步骤，我们成功地安装并配置了React Router。接下来，我们将继续探讨如何创建路由和导航，以实现更复杂的应用结构和用户交互功能。这将是在下一个章节中讨论的内容。

在本章中，我们认识了React Router的基础安装与配置，为后续的路由创建和导航设置打下了良好的基础。希望通过本章的学习，你能掌握如何在你的React应用中应用路由，实现不同页面之间的无缝切换。