如何使用react-router-dom v6将数组元素添加到URL中

核心实现逻辑 #

要生成/products/query=iphone,samsung,honor格式的URL，核心是先把数组转成逗号分隔的字符串，再拼接进路径字符串，最后调用路由导航方法跳转即可。

步骤1：拼接目标路径 #

先通过数组的join(',')方法把数组合并为逗号分隔的字符串，注意数组元素需要是字符串/数字这类基础类型，避免拼接出[object Object]这类异常值。

// 注意数组元素要加引号，为字符串类型，否则会被识别为未定义变量
const params = ['iphone', 'samsung', 'honor']
// 拼接得到目标路径
const targetUrl = `/products/query=${params.join(',')}`

步骤2：配置对应路由 #

因为URL中query=后面的内容是动态变化的，需要在路由表中给这部分配置动态参数：

import { createBrowserRouter } from 'react-router-dom'
import ProductList from './pages/ProductList'

const router = createBrowserRouter([
  {
    // 把动态的品牌列表部分定义为路由参数brandList
    path: '/products/query=:brandList',
    element: <ProductList />
  }
])

步骤3：触发路由跳转 #

在函数组件中调用useNavigate hook 拿到导航方法，传入拼接好的路径即可跳转：

import { useNavigate } from 'react-router-dom'

function ProductEntry() {
  const navigate = useNavigate()
  const params = ['iphone', 'samsung', 'honor']

  const goToFilterPage = () => {
    const queryPart = params.join(',')
    navigate(`/products/query=${queryPart}`)
  }

  return <button onClick={goToFilterPage}>查看筛选后的商品</button>
}

步骤4：目标页解析参数还原数组 #

跳转到对应页面后，通过useParams hook 拿到动态参数，再用split(',')把字符串切回数组即可使用：

import { useParams } from 'react-router-dom'

function ProductList() {
  const { brandList } = useParams()
  // 兜底处理空值情况，拆分回数组
  const brandArray = brandList ? brandList.split(',') : []

  return (
    <div>
      <p>当前筛选的品牌：</p>
      <ul>
        {brandArray.map(brand => <li key={brand}>{brand}</li>)}
      </ul>
    </div>
  )
}

注意事项 #

• 如果数组元素本身包含逗号、斜杠等特殊URL字符，拼接前需要用encodeURIComponent对拼接后的字符串做转义，解析时再用decodeURIComponent解码，避免路由匹配异常、参数解析错误
• 数组为空时要做兜底逻辑，不要生成/products/query=这种无效路径，可根据业务需求跳转到/products默认页，或者补充默认筛选值
• 如果不想用动态路由参数的形式，也可以把这部分参数放在search查询串里，格式为/products?query=iphone,samsung,honor，这种场景可以配合v6的useSearchParams hook 处理，逻辑更简洁

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