如何使用 React Router 构建 SPA 路由

阅读时长 7 分钟读完

React Router 是一个为 React 应用构建和管理路由的开源库,它可以让我们轻松地构建单页应用程序(Single Page Application,SPA),并且管理应用程序的路由与历史记录。在本文中,我们将详细介绍如何使用 React Router 构建 SPA 路由。

安装 React Router

首先,我们需要使用 npm 安装 React Router。在控制台中使用以下命令:

这将安装 react-router-dom 库并添加到我们的项目中。

配置路由

为了使用 React Router,我们需要将路由器(Router)包装在我们的组件中,可以使用三种不同类型的路由器来控制路由:BrowserRouter,HashRouter和MemoryRouter。BrowserRouter 和 HashRouter 都需要一个初始化路由路径,而 MemoryRouter 只是一个内存路由器。

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

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

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

在上面的示例中,我们使用 BrowserRouter 来包装我们的路由器,并设置了几个不同的 Route 组件来响应不同的 URL。

导航

在构建SPA应用时,导航是必不可少的。React Router 提供了多种类型的导航组件,让我们能够快速轻松地创建导航。这些组件包括 Link 和 NavLink。

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

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

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

在上面的代码中,我们使用了 Link 组件来创建导航菜单。Link 组件会自动为我们生成一个正确的 href 属性,指向构建应用程序的基础 URL。

如果我们想要在当前URL等于该导航的URL时应用某些样式,可以使用 NavLink 组件。

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

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

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

在上面的代码中,我们使用了 NavLink 组件,并传递了一个 activeClassName 属性来指定活动链接的样式。

参数

有时,在我们的路由中需要一些参数,例如,在 URL 中定义博客文章的 ID,以便在视图中渲染正确的博客文章。

React Router 提供了一个包含参数的 Route 组件,我们可以使用它来提取 URL 中的参数并在我们的组件中进行访问。

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

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

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

在上面的代码中,我们使用了 a 路由参数:id。在我们的 BlogPost 组件中,我们可以使用 props.match.params.id 访问 ID 参数。

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

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

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

重定向

我们有时需要在我们的路由中进行重定向,例如,在用户访问未登录的页面时,将他们重定向到登录页面。

React Router 提供了Redirect组件,我们可以使用它来执行重定向。

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

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

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

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

在上面的代码中,我们定义了一个标志loggedIn以跟踪用户是否已登录。如果用户未登录,我们调用Login组件来呈现登录表单。如果用户已经登录,我们使用Redirect组件将它们重定向到主页。

结论

React Router 是构建和管理路由的一个非常流行的 JavaScript 库之一。在本文中,我们详细介绍了如何使用 React Router 来构建 SPA 路由,并且演示了如何使用常见的功能例如跳转、参数以及重定向。希望这篇文章能够帮助我们更好地使用 React Router 构建我们的应用程序。

示例代码:https://github.com/Hello-Krystal/react-router-demo

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6731b2020bc820c58239e86d

纠错
反馈