React是一个流行的JavaScript库，用于构建可重用和可维护的用户界面。React Router是一个用于React的第三方库，它允许您在React应用程序中实现导航和路由功能。在React Router中，路由器（Router）是一个高阶组件（Higher Order Component），它可以将URL与React组件关联起来，并通过传递道具（props）向处理程序组件（Handler Component）传递数据。
工作原理
React Router使用<Router>组件在应用程序中创建一个路由器。该组件使用HTML5历史API或哈希路由来管理浏览器的历史记录，并将URL映射到React组件。例如，以下代码片段将根据路径渲染不同的页面：
-- -------------------- ---- -------
------ - ------------- -- ------- ----- - ---- -------------------
-------- ----- -
------ -
--------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
--
-上述代码中，<Router>组件是React Router提供的最基本的路由器组件。<Route>组件是路由器中最重要的组件之一，它定义了一个路径和要呈现的组件。这些路径会被与当前 URL 匹配。一旦找到匹配的路由，React Router就会渲染与该路径对应的组件。
传递道具到处理程序组件
当React Router找到匹配的路由时，它将呈现处理程序组件并向其传递道具。这些道具包括路由器参数、URL查询字符串和任何手动传递的道具。处理程序组件可以通过props访问这些道具。
例如，以下代码片段演示了如何在处理程序组件中使用路由器参数：
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}上述代码中，useParams是一个React Hook，它允许您在处理程序组件中获取路由器参数。在这种情况下，我们将id参数提取到组件中，并在页面上显示它。
示例代码
以下是一个完整的示例代码，演示如何在React Router中传递道具到处理程序组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ---- - ---- -------------------
------ - --------- - ---- -------------------
-------- ------ -
------ -
-----
-------------
------
--
-
-------- ------- -
----- - ------- - - ------------
------ -
-----
------------------
------
--
-
-------- -------- ----- -- -
------ -
-----
---------------
----
----
----- -------------------------------- --------
-----
----
----- -------------------------------- --------
-----
-----
------ ------------------------------- ----------------- --
------ ----- ----------------- ---------- -- ---------- ------ - ------------ --
------
--
-
-------- ----- -
------ -
--------
-----
-----
----
----
----- ------------------
-----
----
----- --------------------------
-----
-----
------
------ ----- -------- ---------------- --
------ -------------- ------------------ --
------
---------
--
-上述代码中，我们定义了三个组件
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8821
