如何在React中实现鸡尾酒详情页的唯一可分享跳转链接

1. 生成分享链接 #

拿到当前鸡尾酒的ID后直接拼接即可，示例代码：

// 按你要求的格式生成链接
const cocktailId = 12345
const shareUrl = `localhost/cocktail?=${cocktailId}`

// 更符合规范的写法（推荐），后续解析更稳定
// const shareUrl = `localhost/cocktail?id=${cocktailId}`

2. 访问分享链接时解析ID #

页面加载时从URL的查询参数中提取鸡尾酒ID，不同场景的实现方式如下：

• React项目（使用react-router v6）：

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

// 页面组件内调用
const [searchParams] = useSearchParams()
// 对应你给出的无参数名格式取空键值
const targetCocktailId = searchParams.get('')
// 如果用推荐的带id参数的格式，改为 searchParams.get('id') 即可

• 原生JS/其他框架通用方案：

const searchParams = new URLSearchParams(window.location.search)
const targetCocktailId = searchParams.get('')

3. 渲染对应鸡尾酒组件 #

拿到解析后的ID后直接传入组件即可，注意URL提取的参数默认是字符串类型，要转成和你组件要求匹配的数字类型：

// 确保ID存在的情况下再渲染组件
{targetCocktailId && <CocktailRecipe cocktailId={Number(targetCocktailId)} />}

提示：你给出的localhost/cocktail?=12345格式不符合URL查询参数通用规范，后续多参数扩展会出现兼容性问题，建议统一改用localhost/cocktail?id=12345的格式。

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