如何在React中用斜杠替代问号在路径中嵌入URL参数？

通常URL参数的写法是：

some-nonexistent-webpage.com/page?item=0c3af753

但我也见过部分网页采用如下REST风格的路径格式：

some-nonexistent-webpage.com/page/0c3af753

有时参数后还会追加内容，比如：

some-nonexistent-webpage.com/page/0c3af753/edit

请问这种方式在React中是否可行？我尝试按此格式设置路径时，控制台出现了No routes matched location警告，我尝试的代码如下：

const navigate = useNavigate();
const item = "0c3af753";
navigate({pathname: `/page/${item}`})

当然可行，你遇到的No routes matched location警告是因为没在路由配置里定义带参数的路径规则，React Router（假设你用的是v6+版本）需要显式声明路径参数才能匹配这种REST风格的URL。

解决步骤： #

• 配置带参数的路由
  在路由配置文件里，把路径写成:参数名的形式来声明占位符，示例：

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* 匹配 /page/xxx 格式的路径 */}
      <Route path="/page/:itemId" element={<PageDetail />} />
      {/* 匹配 /page/xxx/edit 格式的路径，需放在更具体的位置 */}
      <Route path="/page/:itemId/edit" element={<PageEdit />} />
    </Routes>
  );
}

• 在组件中获取路径参数
  在对应页面组件里，使用useParams钩子提取参数：

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

function PageDetail() {
  const { itemId } = useParams();
  // itemId 即为URL中对应位置的内容，比如0c3af753
  return <div>当前项ID：{itemId}</div>;
}

• 导航代码无需修改
  你之前的导航写法是正确的，只要路由配置到位，navigate({pathname: /page/${item}})就能正常匹配路由。

注意事项： #

• 路由匹配有优先级，更具体的路由要放在前面，比如/page/:itemId/edit要放在/page/:itemId之前，避免被泛用路由提前匹配。
• 如果需要限制参数格式（比如仅允许数字），React Router v6.4+支持正则约束：

<Route path="/page/:itemId(\d+)" element={<PageDetail />} />

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