React Router：使用 React.js 构建 SPA 时需要的最佳路由器-JavaScript中文网-JavaScript教程资源分享门户

作为一名前端开发人员，与路由相关的问题已经成为了我们日常开发的一个常见问题。单页应用程序（SPA）风格的应用程序在用户体验方面表现出了非常好的表现，因为它们可以在确保更快的页面加载速度的同时，还可以通过与服务器之间交互的方式实现动态页面渲染。

React.js 是非常流行的 javascript 库之一，它的出现为前端开发带来了新的思路和工具。React.js 不仅可以提供适用于大多数 Web 应用程序的性能，而且还可以快速、可靠地构建 SPA。所以，当我们想为我们的 React.js 应用添加路由时，React Router 就成为了我们最好的选择。

React Router 是什么？

React Router 是一个为 React.js 应用程序提供路由功能的库，它是 React.js 社区中最流行的路由解决方案。React Router 可以使我们的应用实现多个页面，而不必刷新整个页面。此外，它还提供了一种简单而灵活的方式来处理路由并与应用程序状态进行交互。

React Router supports:

客户端和服务器端路由
动态路由
嵌套路由
带参数的路由
与 Redux 集成

React Router 2.x 和以下版本倾向于在 url 中使用 hash 路由，这使得实现客户端路由相对简单并避免了与服务器端路由的问题。React Router 3.x 版本之后，使用 React Router 意味着你同时具备了使用 hash 路由和浏览器 history 的路由功能的思路。

React Router is compatible with React 0.13.x - 17.x.

React Router 的基本概念

在使用 React Router 之前，我们需要先理解一些 React Router 的基本概念。

Route

路由表示浏览器中当前所处的位置，并将该位置映射到组件。这个关系是在路由配置文件（即 Router）中设定的。

import { Route } from 'react-router-dom'

<Route path='/about' component={About} />

在上面的代码中，path 属性表示当前位置，而 component 属性对应着该位置应该呈现的组件。这样，当浏览器中的位置与 path 属性中指定的位置相同时，React Router 将呈现 component 属性所表示的组件。

Router

Router 是 React Router 中最重要的组件。其作用是创建一个我们所称的“容器”，用于存储与各种路由相关的路由配置，以便可以在应用程序中正确地呈现各种组件。

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

<Router>
  <App />
</Router>

在上面的代码中，我们可以看到 BrowserRouter 组件（也可以使用 HashRouter 或 MemoryRouter）将我们的应用程序包装在一个容器中。这个容器将通过 App 组件将路由配置传递给子组件。

Link

Link 用于在 React Router 应用程序中创建网址。它是 React Router 中的一个重要组件，可以帮助我们轻松地导航到网站的其他部分。

import { Link } from 'react-router-dom'

<Link to='/about'>About</Link>

在上面的代码中，我们可以看到 to 属性将链接指向应用程序中的特定位置，这个位置将与 Route 中的 path 属性相匹配。例如，在我们的应用程序中，按下 “About” 标签将使浏览器导航到 /about。

React Router 的用法

为了更好地理解 React Router 的使用过程，让我们来看一下以下的实际示例。

-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------- -- ------- ------- ------ ---- - ---- ------------------

------ ---- ---- -------------------
------ ----- ---- --------------------
------ ------- ---- ----------------------
------ -------- ---- -----------------------

-------- ----- -
  ------ -
    --------
      -----
        -----
          ----
            ----
              ----- ------------------
            -----
            ----
              ----- ------------------------
            -----
            ----
              ----- ----------------------------
            -----
          -----
        ------

        --------
          ------ -------- ----- ---------------- --
          ------ ------------- ----------------- --
          ------ --------------- ------------------- --
          ------ -------------------- --
        ---------
      ------
    ---------
  -
-

------ ------- ---

在上述代码中，我们导入了必须的 BrowserRouter，Switch，Route 和 Link 组件。我们在 <nav> 中创建了一个简单的菜单，<Switch> 组件定义了我们要显示的组件。exact 属性使我们的应用程序显示 Home 组件时，它会正确匹配 “/” 路径，而不会显示任何其他与 “/” 相关的路径。

我们的应用程序现在可以正确地渲染组件，但是现在我们需要创建这些组件。因此，让我们来创建具体组件的代码。

import React from 'react'

function Home() {
  return <h1>Home</h1>
}

export default Home

import React from 'react'

function About() {
  return <h1>About</h1>
}

export default About

import React from 'react'

function Contact() {
  return <h1>Contact</h1>
}

export default Contact

在上述代码中，我们简单地创建了三个组件，每个组件都显示一个标题。我们的应用程序现在应该能够显示正确的内容。但是，如果访问的路径不存在，我们希望告知用户相关信息。让我们来处理一下这个问题。

import React from 'react'

function NotFound() {
  return <h1>404 Not Found</h1>
}

export default NotFound

现在，如果访问应用程序中不存在的路径，应用程序将显示 “404 Not Found” 的信息。这对于应用程序的用户体验非常有帮助，因为他们现在知道他们访问的路径不在应用程序中。

总结

React Router 是一个出色的路由工具，可以帮助我们轻松地在 React.js 应用程序中添加路由。 React Router 具有重要的组件：Route，Router 和 Link，并通过将这些组件组合在一起来构建我们要呈现的界面。React Router 还提供了一种简单的方法来定义我们的路由，并处理浏览器中的请求。因此，如果您正在构建一个 React.js 应用程序并且需要添加路由，请考虑使用 React Router。

最后，感谢您阅读本文。这篇文章虽然只是一个简单的入门指南，但希望它能对您在 React.js 应用程序中添加路由功能时有所帮助。祝您好运！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/649c040e48841e98948cb812