如何在React Router Dom中动态更新URL的:id参数？

要实现点击按钮时同步更新URL中的:id参数，你需要用react-router-dom提供的命令式导航工具useNavigate，仅更新本地state不会触发路由URL的变化。具体操作如下：

• 首先在组件中导入useNavigate钩子：

import { useNavigate } from "react-router-dom";

• 在组件内部调用useNavigate获取导航函数：

const navigate = useNavigate();

• 修改handleNext函数，在更新page状态的同时，调用navigate跳转到目标路由并传入最新的page值：

const handleNext = () => {
  const newPage = page + 1;
  setPage(newPage);
  // 同步更新路由参数
  navigate(`/allPosts/page/${newPage}`);
};

这样点击按钮时，既会更新本地的page状态，也会同步修改URL中的:id参数，同时触发路由匹配的Blog组件重新渲染。

额外补充两个注意点：

1. 如果你使用的是react-router-dom v6版本，需确保路由结构合规——Route必须嵌套在Routes组件内，示例：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

// ...

<Router>
  <Routes>
    <Route path="/allPosts/page/:id" element={<Blog />} />
  </Routes>
</Router>

2. 若要在Blog组件中获取当前路由的:id参数，可使用useParams钩子：

// 在Blog组件内
import { useParams } from "react-router-dom";

const Blog = () => {
  const { id } = useParams();
  // 将字符串类型的id转为数字使用
  const currentPage = Number(id);
  // ...后续逻辑
};

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