React Router如何实现跳转至携带指定post id的页面？

问题原因 #

你当前的写法存在两个核心错误：

1. 路由配置错误：React Router 的路由规则中动态参数需要用占位符写法，而非直接拼接变量的模板字符串，你写的/edit/${registrations._id}作为路由匹配规则无法适配不到对应路径
2. Link跳转路径写法错误：双引号包裹的字符串不会解析${}模板变量插值，最终生成的跳转路径会直接把${registrations._id}当做固定字符串拼接在路径里，而非解析成对应ID值

修复步骤 #

1. 修正路由配置 #

如果使用React Router v6版本（当前主流版本）修改为如下：

<Route path="/edit/:id" element={<Edit />} />

如果使用React Router v5版本修改为如下：

<Route path="/edit/:id">
  <Edit />
</Route>

此处:id是动态参数占位符，所有/edit/开头后接任意值的路径都会匹配到该路由。

2. 修正Link跳转写法 #

把双引号换成反引号包裹路径，触发模板字符串的变量解析：

<Link to={`/edit/${registrations._id}`} className="edit" >Edit </Link>

3. Edit组件内获取ID的方法 #

v6版本：

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

function Edit() {
  // 此处拿到的id就是跳转时携带的registrations._id值
  const { id } = useParams()
}

v5版本：

function Edit(props) {
  const id = props.match.params.id
}

内容的提问来源于stack exchange，提问作者Code With Banchi