正则表达式在路径中使用参数

Question

如何创建可以同时处理零、一个、另一个或两个参数的路径(react路由器v5)。

例如：

/offers /offers/q-shoes /offers/London /offers/London/q-shoes

我正在尝试以这种方式实现它，不幸的是，在本例中，路径/offers/London和/offers未被捕获

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

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

const re = pathToRegexp('/offers/:location?/q-:search?');

const App = () => (
  <Router>
    <Switch>
      <Route path={re}>
        <Browse />
      </Route>
     
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </Router>
);

export default App;

Answer 1

根据documentation，您可以使用字符串或字符串数组作为路径。

返回RegEx对象的pathToRegexp函数，因此您无法使用它。相反，您应该使用字符串数组，其顺序更具体，而不是更具体。

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

const Component = withRouter((props) => {
  return (
    <div>
      <div>{props.title}</div>
      <div>{JSON.stringify(props.match.params)}</div>
    </div>
  );
});

const Home = () => <Component title="Home" />;
const Browse = () => <Component title="Browse" />;
const NoMatch = () => <Component title="NoMatch" />;

const pathArray = ["/offers/:location?/q-:search?", "/offers/:location?"];

const App = () => (
  <Router>
    <div style={{ display: "flex", flexDirection: "column" }}>
      <Link to="/">/Home</Link>
      <Link to="/offers">/offers</Link>
      <Link to="/offers/q-shoes">/offers/q-shoes</Link>
      <Link to="/offers/London">/offers/London</Link>
      <Link to="/offers/London/q-shoes">/offers/London/q-shoes</Link>
    </div>
    <Switch>
      <Route path={pathArray}>
        <Browse />
      </Route>

      <Route path="/">
        <Home />
      </Route>
      <Route>
        <NoMatch />
      </Route>
    </Switch>
  </Router>
);

export default App;