React应用点击编辑链接未正确解析user.id的问题排查

开发React JS应用时遇到对象ID配置异常：点击用户列表任意项的编辑按钮，跳转地址始终为http://localhost:3000/edit/$%7Buser.id%7D，未正确携带所点击对象的对应ID，不符合功能预期。

UserList 列表组件代码 #

import React, { useContext} from 'react';
import { GlobalContext } from '../context/GlobalState';
import { Link } from 'react-router-dom';
import {
    ListGroup,
    ListGroupItem,
    Button
} from 'reactstrap';


export const UserList = () => {
  const { users } = useContext(GlobalContext);
  return (
    <ListGroup className='mt-3'>
      {users.map(user => (
         <ListGroupItem >
         <strong>{user.name}</strong>
         <div  style={{  float: "right"}}>
             <Link className='btn btn-warning mr-1' to={'/edit/${user.id}'}>Edit</Link>
             <Button color='danger' style={{  marginLeft: "10px"}}>Delete</Button>
         </div>
         </ListGroupItem>
      ))}
       
    </ListGroup>
  )
}

GlobalState 全局状态代码 #

import React, { createContext, useReducer} from 'react';
import AppReducer from './AppReducer';

// 初始状态
const initialState = {
    users: [
        {id: 1, name: 'user one'},
        {id: 2, name: 'user two'},
        {id: 3, name: 'user three'}
    ]
};

export const GlobalContext = createContext(initialState);

// 状态提供者组件
export const GlobalProvider = ({children}) => {
    const [state, dispatch] = useReducer(AppReducer, initialState);

    return (
        <GlobalContext.Provider value={{
            users: state.users
        }}>
            {children}
        </GlobalContext.Provider>
    )
}

问题出在Link组件的to属性写法上：
JavaScript 中支持变量插值的模板字符串必须用**反引号（，键盘数字1左侧的按键）**包裹，当前代码里用的是普通单引号''，单引号内部的${user.id}不会被解析为变量取值，会被当做纯文本直接渲染。地址中出现的%7B和%7D是大括号{}`的URL编码结果，最终就生成了带原始模板字符串片段的错误跳转路径。

把Link标签to属性外层的单引号替换为反引号即可，修改后代码如下：

<Link className='btn btn-warning mr-1' to={`/edit/${user.id}`}>Edit</Link>

修改后${user.id}会被正确解析为当前循环项的用户ID，跳转路径会变为/edit/1、/edit/2这类符合预期的格式。

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