前言
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。
导航
React Router 提供了 Link 组件，可以用来生成导航链接。例如，你可以在菜单栏中添加一个导航链接：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- -------- -
------ -
-----
----
----
----- ------------------
-----
----
----- ----------------- ---------
-----
----
----- --------------------- ---------
-----
-----
------
--
-
------ ------- -------这里，我们使用 Link 组件来添加导航链接。
使用 React Router 跳转页面
我们可以使用 history 对象来在 React 组件中使用编程式导航。例如，我们可以在登录后将用户重定向到某个页面：
-- -------------------- ---- -------
------ - -------- - ---- -------------------
-------- ------------ -
----- ---------- ------------ - ----------------
----- ----------- - -- -- -
------------------
---------------------------------
--
-- ---------- -
------ --------- --------------- ---
-
------ -
------
------- ------------------------------------
-------
--
-
------ ------- ------这里我们使用 history 对象将用户重定向到 /dashboard 页面。
总结
本文介绍了 React Router 的基础知识以及如何使用 React Router 构建新特性与 UI。通过学习本文，你应该能够掌握 React Router 的基础知识，进一步提高你的 React 技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646981ed968c7c53b0966c2a