使用useParams切换音频文件失效问题求助

问题根源 #

useParams() 返回的是包含所有URL参数的对象，而非单个参数值。你当前代码中 let sound = useParams(); 拿到的是类似 { sound: "rain" } 的对象，直接用 sound === "rain" 做字符串比较永远返回 false，导致音频切换逻辑不生效。

修复步骤 #

1. 正确解构参数值 #

修改Timer组件中获取参数的代码，解构出sound的实际字符串值：

// 替换原来的 let sound = useParams();
const { sound } = useParams();

2. 验证参数比较逻辑 #

此时sound就是URL中的字符串（"rain"或"wind"），原有的三元判断就能正常工作：

<AudioPlayer src={sound === "rain" ? RainMp3 : WindMp3} autoPlay />

可选优化：添加默认值 #

为避免URL参数缺失时出现异常，可以给参数设置默认值：

const { sound = "rain" } = useParams();

修改后的完整Timer.js片段 #

import { Link, useParams } from "react-router-dom";
import AudioPlayer from "react-audio-player";

// import audio
import RainMp3 from "../audio/rain.mp3";
import WindMp3 from "../audio/wind.mp3";

const Timer = () => {
  // 解构获取sound参数值
  const { sound } = useParams();
  console.log(sound); // 现在会直接打印"rain"或"wind"

 //...

  return (
     //...
      <div className="container">
        <div className="audio">
          {isRunning && time > 0 ? (
            <AudioPlayer src={sound === "rain" ? RainMp3 : WindMp3} autoPlay />
          ) : null}
      </div>
    //...
  );
};

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