根据对象中的值动态更改反应应用程序中的 URL

Nick 发表于 Dev

缺口

如果参数与对象中的值相同，我正在尝试用对象的值替换 url 的参数。

我已经得到它，以便它替换值，但它只是创建一个包含 2 个项目的数组，我希望基本上将它们“合并”在一起以创建一个 URL。

任何帮助深表感谢！

whereurlData由正在传入的类似内容组成：

[
    {
        param: ':userId',
        value: userId || '',
    },
    { param: ':messageId', value: messageId || '' }
]

我的菜单如下所示：

{menu?.map((menuItem, index) => {
    const { title, path } = menuItem
    const finalPath = urlData?.map(
        (url, index) =>
            path.includes(url?.param)
                ? path.replace(
                    url?.param,
                    url?.value
                  )
                : path
        )

    console.log('final', finalPath)

    return (
        <Link
            to={finalPath}
            key={index}
            className={
                pathname === finalPath ||
                finalPath.includes(pathname)
                    ? 'active'
                    : ''
            }
        >
            {title}
        </Link>
    )
})}

我目前的回应：

[
    "/app/messages/be493d77/:messageId",
    "/app/messages/:userId/2cd4df7d"
]

我在寻找什么：

    "/app/messages/be493d77/2cd4df7d"

德鲁里斯

不是映射urlData导致数组长度相等的数组，而是对数组进行归约。

例子：

const userId = "be493d77";
const messageId = "2cd4df7d";

const path = "/app/messages/:userId/:messageId";

const urlData = [
  { param: ":userId", value: userId || "" },
  { param: ":messageId", value: messageId || "" }
];

const finalPath = urlData.reduce(
  (path, { param, value }) => path.replace(param, value),
  path
);

console.log(finalPath);

或者，您可以generatePath使用react-router-dom. 这要求urlData param值匹配参数名称而不是路径的字符串文字。

例子：

import { generatePath } from "react-router-dom";

const urlData = [
  { param: "userId", value: userId || "" },
  { param: "messageId", value: messageId || "" }
];

const finalPath = generatePath(
  path,
  urlData.reduce(
    (params, { param, value }) => ({
      ...params,
      [param]: value
    }),
    {}
  )
);