简介
React 是一个流行的 JavaScript 库，它用于构建用户界面。React 是基于组件的，这意味着可以将应用程序分解为单独的功能块，并在应用程序中重用。React 也具有良好的生态系统，由社区开发并维护的大量 npm 包可以加速开发效率。
React Component Routing 是一个 npm 包，它是一种基于组件的路由系统，它使用 React 编写，可以将路由视图作为独立组件进行管理，并通过 URL 映射实现路由。本篇文章介绍如何使用 React Component Routing。
安装
React Component Routing 是一个 npm 包，使用 npm 可以很容易地安装它。打开终端，输入以下命令即可：
--- ------- -----------------------
使用
1. 引用
在 React 应用中，首先需要在应用程序中引用 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