javascript - 正则表达式在路径中使用参数
问题描述
如何创建一个可以同时处理零、一个、另一个或两个参数的路径(反应路由器 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;
解决方案
根据文档,您可以使用字符串或字符串数组作为路径。
pathToRegexp 函数返回一个 RegEx 对象,因此您不能使用它。相反,您应该使用一个字符串数组,其顺序更具体到不太具体。
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;
推荐阅读
- c# - 尝试使用 Azure DevOps REST API 向工作项发布讨论“评论”时出错
- javascript - 如何使用 React 中的单独按钮关闭“折叠”中打开的“面板”?
- opencv - Emgu.CV.InRange 返回黑色图像
- java - 在Java中,构造函数中最终的字段赋值涉及哪些操作?
- android - 如何使用 AppCompat 样式更改代码中的操作栏颜色?
- android - 如何在 Realm 中将 UnManaged 转换为 Managed List。我正在使用 Kotlin 和 MVVM for Android
- c# - 如何将值列表和新键添加到嵌套字典中?
- c# - ASP.net Core 渴望加载数据
- user-interface - 没有互联网连接时如何显示小吃店?
- javascript - JsPdf autotable中单元格内的粗体和普通文本样式(如何使用jsautotable jspdf使用粗体和普通文本)