Javascript react js中数据值的转义正斜杠

尝试学习React JS，如果这是常识或格式错误，请原谅我。看看这里，我还没有找到任何类似的解决方案来实现我的目标。我也在使用电影数据库进行我的学习项目

代码当前的功能：

我有一个方法可以从这个API调用中获取当前流行的电视节目：

const TRENDING_TV_URL=

${API_URL}TRENDING/TV/day？API_key=${API_key}

根据这些数据，我将其映射到我想要使用它的不同组件

我从API调用返回的数据中提取，并在单击标题时将其作为URL路由

我将此值称为：fetchContentId

例如，单击“男孩”标题时，它会在我的URL中返回此标题”http://localhost:3000/tv/76479"

这正是我想要的

问题是，我有一个新的API调用，我想使用fetchContentId值来获取单个标题数据。要做到这一点，我需要知道它是电视节目还是电影，然后用正斜杠分隔id。我可以从媒体类型和id中提取这些值。我相信我这样做是正确的，因为我在我的URL中得到了结果。问题似乎是当我用正斜杠分隔值，然后将该值发送到新的API调用时

我正在尝试执行的API调用：

const endpoint=

${API_URL}${fetchContentId}？API_key=${API_key}

基于使用相同值的URL，在传入
fetchContentId
时，我应该得到“tv/76479”

问题：我如何完成类似于
fetchContentId={dataId.media\u type+“/”+dataId.id}

我想我需要对这个进行编码？但是执行
fetchContentId={encodeURIComponent（dataId.media_type+“/”+dataId.id）}
在单击“男孩”标题时在我的URL中给出了以下信息：http://localhost:3000/tv%2F76479. 我也不完全确定我会如何解读这个

<Grid header={searchTerm ? "Search Result" : "Trending TV Shows"}>
        {TV_Data.map((dataId) => (
          <Card
            key={dataId.id}
            clickable
            image={
              dataId.poster_path
                ? `${IMAGE_BASE_URL}${POSTER_SIZE}${dataId.poster_path}`
                : NoImage
            }
            voteAverage={dataId.vote_average}
            **fetchContentId={dataId.media_type + "/" + dataId.id}**
          />
        ))}
      </Grid>


{TV_Data.map（（dataId）=>(
))}
您可以使用来实现这一点。它会自动处理路径名和搜索参数。
如果这被用作URI参数，那么使用两个参数而不是一个参数是否可行？
encodeURI（dataId.media\u type+“/”+dataId.id）
或
encode（`dataId.media\u type}/${dataId.id}
）或仅仅
`${dataId.media\u type}/${dataId.id}
？