React中美元符号($)失效：如何生成带产品ID的编辑URL？

你的问题出在JavaScript模板字符串的语法使用错误：要让${变量}语法生效并替换为实际变量值，必须用**反引号（）**包裹整个字符串，而你用了单引号（'），导致${product.id}和${id}`被当作普通字符串直接输出，没有解析成对应的ID值。

修改后的代码示例： #

1. 编辑按钮的Link组件：

<Link className='btn btn-primary m-2'><i className="fa fa-eye" aria-hidden="true"></i></Link>
<Link className='btn btn-outline-primary m-2' to={`/product/edit/${product.id}`}>Edit</Link>
<Link className='btn btn-danger m-2'>Delete</Link>

（注：顺便修正了btn-otline-primary的拼写错误，应为btn-outline-primary）

2. 提交函数中的axios请求：

const onSubmit = async e => {
  e.preventDefault();
  await axios.put(`http://localhost:3001/products/${id}`, product);
  navigate.push("/");
};

关键注意点： #

• 反引号（`）是键盘上数字键1左侧的按键（需切换至英文输入法）
• 只有用反引号包裹的字符串，才能识别并解析${}中的变量

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