React Router v5中如何创建可兼容零个、单个、任一或两个参数的路径（含path-to-regexp使用问题）

我来帮你搞定这个路由匹配的问题！你当前的写法之所以无法捕获/offers和/offers/London，是因为路由路径的正则结构有问题——你定义的/offers/:location?/q-:search?中，:location?是可选参数，但它前后的斜杠是固定存在的。这就导致：

• 当没有location参数时，路径需要变成/offers//q-shoes（两个连续斜杠）才能匹配，但你的实际路径是/offers/q-shoes，自然不匹配；
• 纯/offers路径更是无法满足正则中“必须包含后续斜杠部分”的隐性要求。

下面给你两种可行的解决方案：

方案一：拆分多个Route（清晰直观） #

直接为每种路径情况单独定义Route，但都指向同一个Browse组件，这种写法可读性高，适合快速理解：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home, Browse } from './Pages';

const App = () => (
  <Router>
    <Switch>
      {/* 匹配带location和search的路径 */}
      <Route path="/offers/:location/q-:search">
        <Browse />
      </Route>
      {/* 匹配仅带location的路径 */}
      <Route path="/offers/:location">
        <Browse />
      </Route>
      {/* 匹配仅带search的路径 */}
      <Route path="/offers/q-:search">
        <Browse />
      </Route>
      {/* 匹配纯/offers路径 */}
      <Route exact path="/offers">
        <Browse />
      </Route>
      {/* 首页路由 */}
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </Router>
);

export default App;

方案二：使用正则分组（简洁高效） #

利用React Router支持的正则分组语法，用一个Route匹配所有情况，这种写法更简洁：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home, Browse } from './Pages';

const App = () => (
  <Router>
    <Switch>
      {/* 用非捕获组定义可选的路径段，匹配所有目标路径 */}
      <Route path="/offers(?:/:location)?(?:/q-:search)?">
        <Browse />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </Router>
);

export default App;

如何在组件中获取参数 #

无论用哪种方案，都可以通过useParams钩子获取路由参数：

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

const Browse = () => {
  const { location, search } = useParams();
  // 参数不存在时会返回undefined，可做默认值处理
  return (
    <div>
      <h2>Offers Page</h2>
      <p>当前位置: {location || '未指定'}</p>
      <p>搜索关键词: {search || '未指定'}</p>
    </div>
  );
};

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