介绍
@types/redux-little-router 是一个 TypeScript 类型定义文件的 npm 包，它可以用于在 TypeScript 项目中使用 Redux 小型路由器 (redux-little-router)。redux-little-router 是一个小型但功能强大的路由器库，用于编写前端应用程序的路由器部分。
本文将介绍如何在 TypeScript 项目中使用 @types/redux-little-router，并提供一些代码示例和技巧。
安装
首先，打开终端并导航到您的项目目录，运行以下命令：
npm install @types/redux-little-router --save-dev
然后在您的 TypeScript 文件中导入 redux-little-router，例如：
import * as Router from 'redux-little-router';
接着，您便可以开始使用 redux-little-router 了！
基础用法
下面的示例演示了如何使用 redux-little-router 在 TypeScript 中创建一个基本的路由器。
首先，您需要定义路由器的配置选项，例如：
const routes: Router.Route[] = [
{ path: '/', /* ... */ },
{ path: '/about', /* ... */ },
{ path: '/blog/:slug', /* ... */ },
];其中，每个路由对象都应包含一个路径(path)和其他属性。
然后，您需要创建一个 redux-little-router 类型的 store，并将您的路由器配置选项传递给它，例如：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ---------------- - ---- ---------------------- ----- ------- -------------- - - -- --- -- -- ----- - -------- ----------- -------- - - ------------------ ------ --- ----- ----------- - ----------------- --------- ------- --- ----- ----- - ------------------------ ----------
路由器现在已准备就绪，而且可以与您的其他 Redux 状态一样使用：
store.dispatch(Router.go('/about'));上述代码将触发路由器将 URL 更改为 "/about"。
附加选项
您可根据需要为路由器配置其他附加选项。以下是最常用的选项：
baseUrl
如果您的应用程序托管在网站子目录下，则可以使用 baseUrl 选项指定此子目录，路由器将为所有路径添加此前缀。
例如，如果您的网站托管在 https://example.com/myapp/ 下，则可以设置 baseUrl 如下：
const { reducer, middleware, enhancer } = routerForBrowser({
routes,
baseUrl: '/myapp'
});现在所有路径都将以 /myapp 开头。
request
如果您的应用程序使用服务器端渲染(SSR)或静态网站生成(SSG)，则您可以将 request 选项设置为一个不可变对象的函数，以允许在服务器上正确计算路径，例如：
const { reducer, middleware, enhancer } = routerForBrowser({
routes,
request: (ctx: Record<string, any>) => ({ pathname: ctx.path })
});persistQuery
默认情况下，路由器会将查询字符串(qs)作为对象附加到路由位置。如果您不想在 URL 中显示查询字符串，可以将 persistQuery 设置为 false。
const { reducer, middleware, enhancer } = routerForBrowser({
routes,
persistQuery: false
});示例代码
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - -- -------- ---- ------------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ - ----------------- ---- - ---- ----------------------
----- --- - -- -- -
--
------ --------
-----
----
----
----- --------------------
-----
----
----- --------------------------
-----
----
----- ----------------------------- -----------
-----
-----
------
---
--
----- ---- - -- -- -
--
-------------
---------- -- --- ---- ---------
---
--
----- ----- - -- -- -
--
--------------
-------- ----- -------
---
--
----- -------- - -- ---- -- - ----- ------ -- -- -
--
-------- ---------
-------- ----------
---
--
----- ------ - -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- --
- ----- -------------- ---------- -------- --
--
----- - -------- ----------- -------- - - ------------------ ------ ---
----- ----------- - ----------------- --------- ------- ---
----- ----- - ------------------------ ----------
----- ------ - --------------------------------
----------------
--------- --------------
---- --
------------
------
--总结
在 TypeScript 项目中使用 redux-little-router 可以让您创建一个强大的路由器，以帮助您更方便地管理您的应用程序的浏览（导航）。使用 @types/redux-little-router 包可以大大简化基于 TypeScript 的应用程序中的路由器的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc1adb5cbfe1ea0611ea5