React + React Router 实战：使用 React Router 构建新特性与 UI-FunTeaLearn Online Web Tutorials

前言

React 是一个广受欢迎的前端 JavaScript 框架，React Router 是 React 官方提供的路由管理库。React Router 提供了一种将组件映射到 URL 的简单方式，可以让我们更好地构建单页面应用（SPA）。本文将介绍如何使用 React Router 来构建新特性与 UI。

React Router 基础

我们先来了解一下 React Router 的基础知识。

安装 React Router

我们可以使用 npm 安装 React Router：

npm install react-router-dom

路由关系

React Router 的基础概念是路由关系，它将组件映射到 URL。一个路由关系可以由以下元素构成：

路径：URL 中的路径，默认为 "/"
组件：要渲染的组件
参数：URL 中的参数，可以通过 :param 定义

例如，我们可以创建一个简单的路由关系：

import { Route } from "react-router-dom";
import Component1 from "./Component1";

const routes = (
  <Route path="/" component={Component1} />
);

这里将根路径 / 映射到 Component1 组件。

路由组件

路由组件是 React 组件，可以通过 Route 组件渲染。路由组件通常有以下特点：

始终返回相同的输出，不会改变应用的状态
它可以接受路由参数和查询参数
它通常是一个纯函数组件

例如，下面是一个接受路由参数的路由组件：

import React from "react";

function User(props) {
  return <h1>Hello, {props.match.params.name}!</h1>;
}

export default User;

该组件将路由参数 name 渲染为标题。

路由器

React Router 提供了一个路由器组件 Router，可以用它来管理你应用的路由状态。

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

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

使用 React Router 构建新特性与 UI

动态路由

动态路由是指一些通过参数提供不同数据的路由。例如，我们可以创建一个动态路由来显示不同用户的详细信息。

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

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

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

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

这里我们创建了一个包含用户列表的组件，并使用动态路由来展示不同用户的详细信息。

嵌套路由

在 React Router 中，路由并不是独立的，我们也可以创建嵌套路由。例如，我们可以创建一个包含子路由的 App 组件：

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

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

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

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

在这里，我们创建了一个由四个组件组成的应用程序，并使用 Route 组件将它们映射到特定的 URL。

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

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

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

这里，我们使用 Link 组件来添加导航链接。

使用 React Router 跳转页面

我们可以使用 history 对象来在 React 组件中使用编程式导航。例如，我们可以在登录后将用户重定向到某个页面：

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

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

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

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

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

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

这里我们使用 history 对象将用户重定向到 /dashboard 页面。

总结

本文介绍了 React Router 的基础知识以及如何使用 React Router 构建新特性与 UI。通过学习本文，你应该能够掌握 React Router 的基础知识，进一步提高你的 React 技能。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/646981ed968c7c53b0966c2a

React + React Router 实战：使用 React Router 构建新特性与 UI

前言