React中如何将带变量的路由与数组变量合并？

路由配置：

const routers = {
  home: '/',
  category: '/category/:slug',
}

数据数组：

const array = [
  { id: 1, slug: 'table'},
  { id: 2, slug: 'chair'},
]

使用array.map()生成NavLink的代码：

array.map(item => {
  return <NavLink key={item.id} to={routers.category+item.slug}>
    {item.slug}
  </NavLink>
})

当前生成错误路径：localhost:3000/category/:slugtable、localhost:3000/category/:slugchair，预期正确路径应为localhost:3000/category/table。

方法1：字符串替换占位符 #

直接替换路由配置里的:slug占位符为实际值：

array.map(item => {
  return <NavLink key={item.id} to={routers.category.replace(':slug', item.slug)}>
    {item.slug}
  </NavLink>
})

方法2：模板字符串手动构建路径 #

修改路由配置为基础路径，再用模板字符串拼接：

// 更新路由配置
const routers = {
  home: '/',
  category: '/category',
}

array.map(item => {
  return <NavLink key={item.id} to={`${routers.category}/${item.slug}`}>
    {item.slug}
  </NavLink>
})

方法3：使用React Router官方工具函数（推荐） #

如果使用React Router v6+，用官方提供的generatePath处理带参数的路由，更规范：

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

array.map(item => {
  return <NavLink key={item.id} to={generatePath(routers.category, { slug: item.slug })}>
    {item.slug}
  </NavLink>
})

该函数会自动识别路由中的占位符并替换为对应参数值，适配复杂路由场景。

内容的提问来源于stack exchange，提问作者kan