react-router-dom 如何匹配指定格式URL并获取对应路径参数

路由配置 #

你给出的URL结构统一为/detail/[动态参数]格式，直接用react-router-dom的动态路由规则配置即可，以下是当前主流v6版本的写法：

// 根路由配置文件
import { Routes, Route } from 'react-router-dom';
import Detail from './Detail';

function App() {
  return (
    <Routes>
      {/* :suffix 为动态参数占位符，可自定义命名 */}
      <Route path="/detail/:suffix" element={<Detail />} />
    </Routes>
  )
}

如果你用的是v5版本，配置写法如下：

import { Route } from 'react-router-dom';
import Detail from './Detail';

<Route path="/detail/:suffix" component={Detail} />

如果需要严格限制参数格式（只能为「字母串-数字串」的格式），可以在占位符后加正则约束：

// 仅匹配参数符合字母+横杠+数字规则的路径，不符合的会命中404
<Route path="/detail/:suffix([a-zA-Z]+-\d+)" element={<Detail />} />

参数获取 #

v6版本获取参数 #

在详情页组件中调用useParams钩子即可拿到动态参数：

// Detail 组件
import { useParams } from 'react-router-dom';

function Detail() {
  // 变量名要和路由配置里的占位符名称保持一致
  const { suffix } = useParams();
  // 此时suffix就是你需要的sbc-123、tresds-121212这类参数字符串
  console.log(suffix);

  return <div>当前详情参数：{suffix}</div>
}

v5版本获取参数 #

直接从组件props的match对象中提取即可：

function Detail(props) {
  const suffix = props.match.params.suffix;
  console.log(suffix);
  return <div>当前详情参数：{suffix}</div>
}

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