React中如何使用switch case匹配带:id动态参数的pathname路由

你现有代码不生效的核心原因是：switch 的case值会和传入的location.pathname做全等比较，而String.match()返回的是匹配结果数组或者null，不可能和字符串类型的路径相等，所以永远无法命中带参数的路由分支。

最简单的改造方案是将switch的判断条件改为true，每个case位置写布尔判断表达式即可：

useEffect(() => {
  switch (true) {
    case location.pathname === '/':
      setTitle('My Board');
      break;
    case location.pathname === '/offers':
      setTitle('My Offer');
      break;
    case location.pathname === '/invoice':
      setTitle('Invoices');
      break;
    // 用全匹配正则避免匹配到其他结尾是数字的路由
    case /^\/invoice\/\d+$/.test(location.pathname):
      // 如果需要用到id可以加这行：const id = location.pathname.match(/\d+$/)[0]
      setTitle('Invoice Number ***');
      break;
    default:
      setTitle('My Board');
  }
}, [location]);

如果你项目用的是React Router v6及以上版本，可以直接用官方提供的matchPath方法更规范的匹配动态路由，不需要自己手写正则：

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

useEffect(() => {
  switch (true) {
    case location.pathname === '/':
      setTitle('My Board');
      break;
    case location.pathname === '/offers':
      setTitle('My Offer');
      break;
    case location.pathname === '/invoice':
      setTitle('Invoices');
      break;
    case matchPath('/invoice/:id', location.pathname):
      // 可以直接从匹配结果拿id：const { id } = matchPath('/invoice/:id', location.pathname).params
      setTitle('Invoice Number ***');
      break;
    default:
      setTitle('My Board');
  }
}, [location]);

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