匹配React Router中url中的值数组

import { BrowserRouter as Router, Route, useParams } from 'react-router-dom';

function ItemList() {
  const { ids } = useParams();
  // ids 是一个字符串，需要转换为数组
  const idArray = ids.split(',');

  return (
    <div>
      <h1>Items</h1>
      <ul>
        {idArray.map(id => (
          <li key={id}>Item {id}</li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Route path="/items/:ids" component={ItemList} />
    </Router>
  );
}

export default App;

import { BrowserRouter as Router, Route, useLocation } from 'react-router-dom';

function ItemList() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const ids = searchParams.getAll('id'); // 获取所有id参数

  return (
    <div>
      <h1>Items</h1>
      <ul>
        {ids.map(id => (
          <li key={id}>Item {id}</li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Route path="/items" component={ItemList} />
    </Router>
  );
}

export default App;

const idArray = ids.split(',').map(id => parseInt(id, 10)); // 确保转换为整数

<Route path="/items/:ids(\d+(,\d+)*)" component={ItemList} />