React中美元符号($)与冒号(:)的含义解析（附代码示例）

嘿，我来帮你把这两个符号的作用说清楚，它们其实分别属于React Router的路由规则和ES6的JavaScript语法范畴：

一、冒号（:）：React Router的动态URL参数占位符 #

你举的<Route path={'/movie/:id'} component={Movie} />这个例子里，:id是React Router里用来定义动态路由参数的语法。它的作用是：

• 匹配URL中/movie/后面的任意内容，把这部分内容标记为名为id的参数
• 当用户访问类似/movie/123、/movie/abc这样的路径时，React Router会把123、abc这些值捕获下来，传给对应的Movie组件

在组件里获取这个参数的方式：

• 类组件：通过this.props.match.params.id拿到id的值
• 函数组件：使用useParams()钩子，比如const { id } = useParams();

举个类组件的小例子：

class Movie extends React.Component {
  render() {
    const movieId = this.props.match.params.id;
    return <div>当前查看的电影ID是：{movieId}</div>;
  }
}

二、美元符号（$）：ES6模板字符串的变量插入标记 #

你例子里的<Link to={`/movie/${this.state.movies[index].id}`} ...>，这里的$是ES6模板字符串的语法，和React本身无关，是JavaScript的新特性。它的作用是：

• 在反引号（`）包裹的字符串中，通过${}的形式插入JavaScript表达式（变量、计算式等），自动把表达式的结果转为字符串并拼接到整体字符串里

不用模板字符串的话，你得这么写：

<Link to={'/movie/' + this.state.movies[index].id} ...>

对比下来，模板字符串的写法更直观，尤其是拼接多个变量的时候，可读性会高很多。

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