React.js中字面量字符串拼接异常问题咨询

问题出在哪 #

你这段代码的问题是没必要把普通字符串拼接（+）和模板字符串（${}）混着用，这种冗余写法会触发ESLint这类语法检查工具的no-useless-concat规则警告，也就是你看到的「意外的字面量字符串拼接」错误。

举个例子，你写的：

to={routeName.tutorClassView + '?classId=' + `${_.get(value, '_id')}`}

这里'?classId=' + ${_.get(value, '_id')}``完全是多余的操作——模板字符串本身就是字符串，直接整合到一个模板里就行，不用额外用+拼接。

两种修复方法 #

方法1：统一用模板字符串（最省事） #

把所有内容都放进一个模板字符串里，彻底抛弃+拼接：

// 单个参数场景
to={`${routeName.tutorClassView}?classId=${_.get(value, '_id')}`}

// 多个参数场景
to={`${routeName.tutorClassView}?classId=${_.get(v, 'id')}&providerId=${_.get(v, 'provider.id')}`}

方法2：用URLSearchParams构建参数（更规范） #

如果参数多、或者需要处理特殊字符编码，推荐用URLSearchParams来生成查询字符串，可读性和安全性更好：

// 单个参数
const params = new URLSearchParams();
params.append('classId', _.get(value, '_id'));
to={`${routeName.tutorClassView}?${params.toString()}`}

// 多个参数
const params = new URLSearchParams();
params.append('classId', _.get(v, 'id'));
params.append('providerId', _.get(v, 'provider.id'));
to={`${routeName.tutorClassView}?${params.toString()}`}

这种方式会自动帮你处理参数编码，避免特殊字符导致的路径异常。

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