React中如何将useParams获取的ID转换为规范页面标题

最优方案：维护路由ID与标题的映射表 #

因为URL里的路由参数（比如captain-america-civil-war）为了符合URL规范，会去掉特殊符号、转成小写连字符，这些丢失的信息（比如冒号）无法通过纯字符串转换精准还原，所以最可靠的方式是维护一个映射表：

1. 创建一个存储电影标题对应关系的对象：

const movieTitleMap = {
  'captain-america-civil-war': 'Captain America: Civil War',
  'iron-man-3': 'Iron Man 3',
  'thor-ragnarok': 'Thor: Ragnarok',
  // 其他电影的路由ID和对应标题
};

2. 在详情页中通过路由ID获取对应标题：

import { useParams } from 'react-router-dom';

const { id } = useParams();
// 找不到对应标题时，回退显示原ID
const displayTitle = movieTitleMap[id] || id;

<div className="marvel__main-topbar">
  <span className="marvel__main-title">{displayTitle}</span>
</div>

这种方式能100%保证标题的准确性，也方便统一管理所有电影的标题，即使用户直接输入URL访问详情页也能正常显示正确标题。

备选方案：跳转时通过路由State传递标题 #

如果不想维护映射表，可以在主页面跳转时，把标题通过路由的state传递给详情页：

1. 主页面改用React Router的Link组件（推荐，而非原生a标签）：

import { Link } from 'react-router-dom';

<Link 
  to={{
    pathname: '/marvel/captain-america-civil-war',
    state: { title: 'Captain America: Civil War' }
  }}
>
  Captain America: Civil War   
</Link>

2. 详情页读取state中的标题：

import { useParams, useLocation } from 'react-router-dom';

const { id } = useParams();
const location = useLocation();
// 若直接访问URL导致state丢失，回退显示映射表或原ID
const displayTitle = location.state?.title || movieTitleMap[id] || id;

<div className="marvel__main-topbar">
  <span className="marvel__main-title">{displayTitle}</span>
</div>

注意：这种方式依赖跳转时的state，如果用户直接在地址栏输入URL访问详情页，state会不存在，所以需要搭配映射表或原ID作为降级方案。

不推荐：字符串转换+特殊处理 #

如果坚持用字符串转换，只能针对特殊情况手动补全符号，但维护成本极高，示例如下：

function formatMovieTitle(id) {
  // 将连字符分割的单词转为首字母大写
  const words = id.split('-').map(word => 
    word.charAt(0).toUpperCase() + word.slice(1)
  );
  
  // 针对特定ID手动处理特殊格式
  if (id === 'captain-america-civil-war') {
    // 在"America"后插入冒号
    words.splice(2, 0, ':');
    return words.join(' ');
  }
  if (id === 'thor-ragnarok') {
    words.splice(1, 0, ':');
    return words.join(' ');
  }
  
  return words.join(' ');
}

// 详情页使用
const { id } = useParams();
const displayTitle = formatMovieTitle(id);

这种方法需要为每个带特殊格式的标题写判断逻辑，后续新增电影时都要修改代码，非常繁琐，不推荐使用。

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