React Router v5如何创建支持两个可选参数多场景匹配的路由路径

问题原因 #

你当前的写法无法匹配/offers/London，核心问题是路径规则中:location?后紧跟了固定片段/q-，规则要求只要匹配到location参数，后面必须存在/q-开头的内容，哪怕search是可选参数，/q-这个固定前缀也是必须的，所以没有/q-的/offers/London自然无法匹配。

解决方案 #

这里提供两种实现方式，你可以根据需求选择：

方案1：使用多路径数组（推荐，可读性更高） #

React Router v5的Route组件原生支持传入路径数组，你可以直接列出所有需要匹配的路径，无需手写复杂正则：

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

import { Home, Browse } from './Pages';

const App = () => (
  <Router>
    <Switch>
      {/* 直接传入路径数组，匹配所有4种场景 */}
      <Route path={[
        '/offers',
        '/offers/:location',
        '/offers/q-:search',
        '/offers/:location/q-:search'
      ]}>
        <Browse />
      </Route>
     
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </Router>
);

export default App;

方案2：使用带正则约束的单路径 #

如果你希望只用一条路径实现，可以给location参数添加正则约束，避免q-开头的搜索参数被识别为location，同时把q-相关的片段整体设为可选：

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

import { Home, Browse } from './Pages';

const App = () => (
  <Router>
    <Switch>
      {/* location参数禁止匹配q-开头的内容，q-相关片段整体可选 */}
      <Route path="/offers/:location(?!q-.*)?(/q-:search)?">
        <Browse />
      </Route>
     
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </Router>
);

export default App;

参数获取 #

在Browse组件中可以通过useParams钩子获取两个参数，参数不存在时会返回undefined：

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

function Browse() {
  const { location, search } = useParams();
  // 示例对应关系：
  // /offers → location: undefined, search: undefined
  // /offers/q-shoes → location: undefined, search: 'shoes'
  // /offers/London → location: 'London', search: undefined
  // /offers/London/q-shoes → location: 'London', search: 'shoes'
}

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