如何在react-router-dom v6中设置动态URL参数为变量值

你的核心问题是Link组件的to属性写法错误，直接把路由占位符:persID写进路径里，导致URL没有被替换成实际变量值。下面是具体的修正方案和相关思路：

1. 修正Link的跳转路径 #

从Context获取到persID后，直接用模板字符串将变量插入到路径中，而非保留占位符:persID：

// App.js 中的 Link 组件
import { Link } from 'react-router-dom';
import { useContext } from 'react';
import { YourContext } from './YourContext';

function App() {
  const { persID } = useContext(YourContext);

  return (
    <Link to={`/schedule/mySchedule/${persID}`}>我的日程</Link>
  );
}

当persID为2时，生成的URL就是/schedule/mySchedule/2，完全符合需求。

2. 确认Route配置正确性 #

你当前的Route配置是正确的，无需修改：

// 路由配置部分
import { Routes, Route } from 'react-router-dom';
import MySchedule from './MySchedule';

function AppRoutes() {
  return (
    <Routes>
      <Route path="/schedule/mySchedule/:persID" element={<MySchedule />} />
    </Routes>
  );
}

3. 在MySchedule组件中获取参数 #

如果需要在MySchedule组件中拿到URL里的persID值，使用useParams钩子即可：

// MySchedule.js
import { useParams } from 'react-router-dom';

function MySchedule() {
  const { persID } = useParams();
  // 此处的 persID 就是URL中的实际值，比如2
  return <div>当前用户ID：{persID}</div>;
}

4. 编程式导航的替代方案 #

如果需要通过按钮点击等事件手动触发跳转（而非使用Link），react-router-dom v6已移除useHistory，改用useNavigate钩子：

// 编程式跳转示例
import { useNavigate } from 'react-router-dom';
import { useContext } from 'react';
import { YourContext } from './YourContext';

function SomeComponent() {
  const { persID } = useContext(YourContext);
  const navigate = useNavigate();

  const handleJump = () => {
    navigate(`/schedule/mySchedule/${persID}`);
  };

  return <button onClick={handleJump}>跳转到我的日程</button>;
}

手动替换路径的思路 #

如果一定要手动替换占位符（不推荐，模板字符串更简洁直观），可以用字符串替换方法：

const basePath = "/schedule/mySchedule/:persID";
const actualPath = basePath.replace(':persID', persID);
// 当persID为2时，actualPath就是"/schedule/mySchedule/2"

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