什么是 connected-next-router-jsm？
connected-next-router-jsm 是一个适用于 React 应用的 npm 包。它为我们提供了一种可靠的方式来管理与我们应用程序路由相关的状态信息。
通过使用 connected-next-router-jsm，我们可以快速而简单地创建一个与我们 React 应用相互协作的路由状态树。这个状态树包含了当前路由的信息以及其历史记录。
如何使用 connected-next-router-jsm？
我们可以在 React 应用中使用 connected-next-router-jsm 的几个简单的步骤：
第一步：安装 connected-next-router-jsm
使用以下命令在您的 React 应用中安装 connected-next-router-jsm：
npm install connected-next-router-jsm
第二步：导入 connected-next-router-jsm 中间件
要使用 connected-next-router-jsm，我们需要将其与 Redux Store 集成。为此，我们需要导入中间件。
import { routerMiddleware } from "connected-next-router-jsm";第三步：创建 Redux Store
我们需要创建一个包含 routerMiddleware 的 Redux Store。下面是一个示例代码，我们可以使用此代码根据自己的需求进行修改。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ - ------------- - ---- ---------------------
------ - ---------------- - ---- ----------------------------
------ - -------------------- - ---- ----------
------ ----------- ---- -------------
------ ----- ------- - -----------------------
----- -------------- - ------------ -- -
-- --------------------- --- ------------- -
----- - ------------------- - - ------------------------------------
------ ----------------------------------------------------
-
------ -------------------------------
--
------ ----- --------- - --------- -- -
----- ----- - ------------
------------
-------------------------------------------
--
------ ------
--
------ ----- ------- - ------------------------ - ------ ---- ---第四步：在 Provider 中使用配置 store
我们现在已经准备好在 Provider 中使用配置 store。除此之外，我们还需要将 React 元素传递到我们的应用程序。
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - ------- - ---- -----------
-------- ------- ---------- --------- -- ---- -
------ -
--------- --------------
---------- -------------- --
-----------
--
-
------ ------- -------------------------第五步：即可使用
现在，我们已经在我们的 React 应用程序中成功配置了 connected-next-router-jsm。现在就可以使用 React-Router 提供的 API 访问路由状态树。
例如，要获取当前路由的路径：
import { useSelector } from "react-redux";
function MyComponent() {
const { pathname } = useSelector((state) => state.router.location);
return <div>当前路径: {pathname}</div>;
}强大功能
connected-next-router-jsm 提供了更多强大且可扩展的功能，例如：
- 操作路由状态 -- 使用
dispatch函数进行操作。 - 监听路由事件 -- 使用
history.listen函数监听路由事件，例如进入页面时自动滚动到顶部。
总结
connected-next-router-jsm 是一个非常有用的 npm 包，可以让我们更加方便和可靠地管理和操作我们的 React 应用程序的路由状态。在本文中，我们已经详细介绍了 connected-next-router-jsm 的使用方法，并展示了一些示例代码来帮助您开始使用该包。无论您是新手还是经验丰富的开发人员，connected-next-router-jsm 都是您不可或缺的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735b890c4f7277583fa0