如何用React Router Hash Router实现含多ID的子路由导航？

核心思路 #

把多个ID用逗号分隔作为单个路由参数传递，通过正则表达式约束参数格式确保仅匹配数字组合，之后在组件中解析该参数为ID数组。

1. 路由规则配置 #

适用于React Router v5 #

使用HashRouter + Switch + Route，通过正则匹配多ID格式：

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

function App() {
  return (
    <HashRouter>
      <Switch>
        {/* 正则约束ids为一个或多个逗号分隔的数字，noteId为单个数字 */}
        <Route 
          path="/about/:ids(\d+(?:,\d+)*)/note/:noteId(\d+)/team" 
          component={TeamPage} 
        />
        {/* 其他路由... */}
      </Switch>
    </HashRouter>
  );
}

适用于React Router v6 #

使用HashRouter + Routes + Route，v6路径支持正则匹配：

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

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route 
          path="/about/:ids(\d+(?:,\d+)*)/note/:noteId(\d+)/team" 
          element={<TeamPage />} 
        />
        {/* 其他路由... */}
      </Routes>
    </HashRouter>
  );
}

正则说明：\d+(?:,\d+)* 表示匹配1个数字，后面可跟任意多个,数字组合，确保ids只能是合法的数字列表。

2. 导航到目标路由 #

使用Link组件 #

直接拼接逗号分隔的ID字符串到路径中：

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

// 示例：传递ids为[1,2,3]，noteId为4
<Link to="/about/1,2,3/note/4/team">进入团队页面</Link>

编程式导航 #

React Router v5（useHistory）

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

const history = useHistory();
const navigateToTeam = () => {
  const ids = [1,2,3];
  const noteId = 4;
  history.push(`/about/${ids.join(',')}/note/${noteId}/team`);
};

React Router v6（useNavigate）

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

const navigate = useNavigate();
const navigateToTeam = () => {
  const ids = [1,2,3];
  const noteId = 4;
  navigate(`/about/${ids.join(',')}/note/${noteId}/team`);
};

3. 在目标组件中解析参数 #

通过useParams钩子获取路由参数，再将ids字符串拆分为数字数组：

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

function TeamPage() {
  const { ids, noteId } = useParams();
  
  // 将逗号分隔的字符串转为数字数组
  const idList = ids.split(',').map(id => Number(id));
  const currentNoteId = Number(noteId);

  return (
    <div>
      <h1>团队页面</h1>
      <p>选中的ID列表：{idList.join(', ')}</p>
      <p>笔记ID：{currentNoteId}</p>
    </div>
  );
}

注意事项 #

• 确保传递的ids数组元素都是数字，避免非数字字符导致解析错误；
• 如果需要处理空ID列表的场景，可以调整正则为(\d*(?:,\d+)*)，但业务上建议限制至少传递一个ID；
• 路由匹配顺序要注意，避免更宽泛的路由规则提前匹配该路径。

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