小编sol*_*liz的帖子

为什么 React router v6 useParams返回属性可能为“未定义”的对象？

在下面的代码中，我的 IDE 指示const slug: string | undefined.

const { slug } = useParams<"slug">();

这是因为Params类型定义：

/**
 * The parameters that were parsed from the URL path.
 */
export type Params<Key extends string = string> = {
  readonly [key in Key]: string | undefined;
};

但为什么不Params这样定义（没有| undefined）：

export type Params<Key extends string = string> = {
  readonly [key in Key]: string;
};

如果带有参数的路由与 URL 匹配，则该参数不能为undefined。那么，有没有 …

在授权代码授予流程中，一旦公共客户端（例如单页应用程序 (SPA)）获得 OAuth 2.0 访问令牌，SPA 应将其保存在何处？

• 将访问令牌存储在区域设置存储或会话存储中会导致跨站点脚本 (XSS) 攻击，因此应该避免这种情况。
• 将访问令牌存储在非 httpOnly cookie 中也会导致 XSS 攻击，因此也应该避免这种情况。
• 将访问令牌存储在 httpOnly cookie 中在技术上是不可能的，因为这是 httpOnly 的重点。

所以我看到的唯一安全的剩余选项是将它保存在内存中。它真的安全吗？这是唯一安全的方法吗？

从 v4迁移到 v5指南指出：

系统Boxprops 在 v5 中有一个可选的替代 API，使用sxprop. 您可以阅读本节了解这个新 API 背后的“原因”。

<Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>

Run Code Online (Sandbox Code Playgroud)

所提到的部分表明：

将系统置于一个 prop ( sx) 下有助于区分仅为 CSS 实用程序而定义的 props 与为组件业务逻辑而定义的 props。这对于关注点分离很重要。

但是说到性能，这两种方式都属于性能权衡d. Render 1,000 Box中的基准项吗？或者使用系统属性和prop之间有什么区别吗？sx

在 React Router v5 中，为了指定 useParams 的结果类型，我使用了：

const { param1, param2 } = useParams<{ param1: string, param2: string }>();

如何使用 React Router v6 做到这一点？

我不知道如何输入超过 1 个参数（例如：）useParams<"param1">()，也不知道如何输入参数 asstring和 not string | undefined（参见问题）。