@curi/addon-ancestors 是一个用于 Curi 路由的 npm 包，它允许你方便地获取当前路由的所有祖先路由信息，并且可以将这些信息作为 props 传递给子组件。
安装
使用 npm 或 yarn 安装 @curi/addon-ancestors。
npm install @curi/addon-ancestors
或
yarn add @curi/addon-ancestors
使用
这里简单介绍一下如何在 React 中使用 @curi/addon-ancestors。
首先需要创建一个 Curi 路由对象。
-- -------------------- ---- -------
------ - ------------ - ---- ---------------
------ - ------- - ---- -------------------
------ - --------- - ---- ------------------------
-- ------
----- ------ - --------------------- ------- -
------------ -
-- -- ---------------
-----------
-
---其中，routes 是一个路由配置对象，sideEffects 是一个数组，用于配置 Curi 路由的各个 addon。
然后在 React 组件中获取祖先路由信息并将其传递给子组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- --------------
------ - --------- - ---- ------------------------
-- -----
-------- ------------- ------ --------- -- -
-- ----------------
------ -
-----
---------------------
----
---------------- -- -
--- --------------------------
---
-----
------
--
-
-- ---
-------- ----- -
----- - -------- - - ------------
-- - --------- -- ----- ------
------ ------------ ---------------- ------------------------------- ---
-以上代码中，useRouter 是一个自定义 Hook，用于获取当前 Curi 路由的信息。
另外，ancestors(response) 是一个函数，用于获取当前路由的所有祖先路由信息，并作为 props 传递给子组件。
示例代码
以下是一个完整的示例代码，演示如何在 React 中使用 @curi/addon-ancestors。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- ---------------
------ - ------- - ---- -------------------
------ - --------- - ---- ------------------------
------ - ---------------------- --------- - ---- --------------
-- --------
----- ------ - -
-
----- -------
----- ---
-- -----
--------- -
-
----- ----
----- ---
--
-
----- ----
----- ----
-- -----
--------- -
-
----- ----
----- ---
-
-
-
-
-
--
-- ------
----- ------ - --------------------- ------- -
-- -- ---------------
------------ -------------
---
-- ------
----- ------ - ------------------------------
-- -----
-------- ------------- ------ --------- -- -
-- ----------------
------ -
-----
---------------------
----
---------------- -- -
--- --------------------------
---
-----
------
--
-
-- ---
-------- ----- -
----- - -------- - - ------------
-- - --------- -- ----- ------
------ ------------ ---------------- ------------------------------- ---
-
-- --
-------- ------ -
------ -
--------
---- --
---------
--
-
------ ------- -----深度和学习指导
@curi/addon-ancestors 是一个非常实用的 npm 包，它解决了在 React 应用中获取祖先路由信息的问题。
使用 @curi/addon-ancestors 可以让我们更加便捷地处理一些复杂的场景，比如面包屑导航、面向代理对象的路由组件等。
当然，在学习 @curi/addon-ancestors 的同时，我们还需要了解 Curi 路由的更多高级用法，如 config、events、memory 和 history 等。
总之，学习和掌握 @curi/addon-ancestors 可以让我们更加熟练地使用 Curi 路由，从而更好地构建 React 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562dd81e8991b448e04e5