将反应路由器添加到项目

介绍

React Router 是一个让你能够在 React 应用中使用路由的库。它能让你构建单页面应用（SPA）并进行服务端渲染。

在本教程中，我们将会介绍如何通过 npm 将 React Router 添加到 React 项目中，并使用它来进行一些基本的路由设置。

安装

安装 React Router 最简单的方式就是通过 npm 进行安装。在终端中执行以下命令来安装它：

npm install react-router-dom

添加路由

在 React 中使用 React Router 主要是构建路由。在我们开始之前，让我们先创建一个基本的 React 组件来展示我们的路由。为了简单起见，我们将只会展示一些简单的文本。

function Home() {
  return <h2>欢迎访问首页！</h2>;
}

实现基本的路由很简单，只需要使用路由库提供的 BrowserRouter 和 Route 组件。我们要在这个组件内部添加一个 Route 组件，让它负责将我们的 Home 组件和 / 这个 URL 进行匹配。

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

function App() {
  return (
    <Router>
      <div>
        <Route exact path="/" component={Home} />
      </div>
    </Router>
  );
}

现在，当我们访问 / 这个路由时，它将会渲染 Home 组件。

跳转路由

为了跳转到新的路由，可以使用 Link 组件。它生成一个可以被点击的链接，点击链接时会自动切换到新的路由。

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

function Home() {
  return <h2>欢迎访问首页！</h2>;
}

function About() {
  return <h2>关于我们</h2>;
}

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

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

现在，当我们点击链接时，它将会跳转到指定的路由并渲染对应的组件。

参数路由

有时候我们需要在 URL 中传递参数，比如说在查看一个用户的详情时可能会传递一个用户的 ID。React Router 可以很轻松的处理这个问题。

首先，我们需要定义一个带有参数的路由：

function UserProfile(props) {
  return <h2>用户 ID: {props.match.params.id}</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/users/123">查看用户详情</Link>
            </li>
          </ul>
        </nav>

        <Route exact path="/" component={Home} />
        <Route path="/users/:id" component={UserProfile} />
      </div>
    </Router>
  );
}

在这个例子中，我们定义了一个带有参数 id 的路由，并且使用 :id 的形式将其嵌入到路由路径中。

现在，当我们访问 /users/123 这个路由时，它将会渲染 UserProfile 组件，并且 props.match.params.id 中将会包含传递过来的参数。

总结

React Router 是一个让你在 React 应用中使用路由的库。在本教程中，我们介绍了如何使用路由库提供的组件来进行一些基本的路由设置。通过这个简单的例子，你应该可以看到 React Router 在处理路由时的强大之处。