简介
React 是一个流行的 JavaScript 库，它用于构建用户界面。React 是基于组件的，这意味着可以将应用程序分解为单独的功能块，并在应用程序中重用。React 也具有良好的生态系统，由社区开发并维护的大量 npm 包可以加速开发效率。
React Component Routing 是一个 npm 包，它是一种基于组件的路由系统，它使用 React 编写，可以将路由视图作为独立组件进行管理，并通过 URL 映射实现路由。本篇文章介绍如何使用 React Component Routing。
安装
React Component Routing 是一个 npm 包，使用 npm 可以很容易地安装它。打开终端，输入以下命令即可：
npm install react-component-routing
使用
1. 引用
在 React 应用中，首先需要在应用程序中引用 React Component Routing：
import { Router, Route } from 'react-component-routing';2. 创建 Router 组件
React Component Routing 的核心是 Router 组件，它定义了所有路由的 URL 映射，并将相应的路由视图组件挂接到该 URL。
基本上，Router 组件需要一个默认路径（这是在 URL 中未指定路径的情况下所使用的），并且需要具有至少一个 Route 组件。以下是 Router 组件的基本结构：
-- -------------------- ---- -------
----- ------------ - -
------------ ----
------- -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
--
-
----- -----------
---------- -------
-
-
-
-------- ----- -
------ -
------- ----------------------
------ -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
--
-上面的代码定义了一个基本的 Router 组件，它将 URL 映射到三个路径："/"、"/about" 和 "/contact"，并将相应的组件挂接到每个路径。如果 URL 带有 /about，则 About 组件将呈现在路由的视图部分。
3. 创建 Route 组件
每个路由都应该有一个单独的组件，该组件对应着路由 URL 的一部分。在 React Component Routing 中，这些路由组件使用 Route 组件来定义。
以下是一个例子：
-- -------------------- ---- -------
------ - ----- - ---- --------------------------
-------- ------- -
------ -
-----
--------- -------
----- --- - ---- -- ---------- ------- -- ------ ---- --- ---------
------
--
-
------ ------------- ----------------- --总结
React Component Routing 为 React 应用提供了一种强大的基于组件的路由系统。它可以帮助开发人员轻松地管理应用程序的不同部分，并且具有良好的灵活性和扩展性。在本文中，我们学习了如何使用 React Component Routing 并创建一个基本的路由系统。希望这篇文章对 React 开发的初学者有所帮助！
参考例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- --------------------------
-------- ------ -
------ -
-----
----------- -- --- ------------
--------- ------ - ---- ---- --- ---- -- --- ------------
------
--
-
-------- ------- -
------ -
-----
--------- -------
----- --- - ---- -- ---------- ------- -- ------ ---- --- ---------
------
--
-
-------- --------- -
------ -
-----
----------- -------
------ -- ----- ---- --- ------- ---- -- --- ---- --- --------------
------
--
-
----- ------------ - -
------------ ----
------- -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
--
-
----- -----------
---------- -------
-
-
-
-------- ----- -
------ -
------- ----------------------
------ -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
--
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608481e8991b448deb90