我正在尝试使regex模式匹配用于反应性路由器4,但不幸的是,this.props.match.params.id
没有正确地解析路径,而是显示为未定义的.。
我希望能够访问的路径示例:
我的组成部分:
import React from "react";
import PropTypes from "prop-types";
import { withRouter, } from "react-router";
import { Switch, Route } from "react-router-dom";
class Foo extends React.Component {
render(){
console.log(this.props.match);
return <div>Match: {this.props.match.params.id}</div>
}
}
const industryRegex = "(air|motor|ship)";
const guidRegex = "([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})?"; // Note the questionmark ? at the end
const pathId = `/gps/:id${guidRegex}`;
const pathIndustry = `/gps/:industryType${industryRegex}`;
const pathIndustryAndId = `/gps/:industryType${industryRegex}/:id${guidRegex}`;
console.log(pathId);
console.log(pathIndustry);
console.log(pathIndustryAndId);
const AppComponent = ({...props}) => {
return (
<Switch>
<Route path={pathId} component={Foo} />
<Route path={pathIndustry} component={Foo} />
<Route path={pathIndustryAndId} component={Foo} />
</Switch>
)
};
export default withRouter(AppComponent);
尝试以下路径/gps/a0b6dc45-11a1-42c5-afdb-a62822d109dc
将导致this.props.match.params.id
未定义。
任何帮助都很感激
发布于 2018-02-10 19:02:06
在行业regex结束时,您遗漏了一个问号,将其标记为传递案例3的选项。否则,regex将适用于所有声明的案例。
固定的正则表达式应该如下所示:/gps/:industryType(air|motor|ship)?/:id([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})?
提示:对于react路由器4,您可以在这里测试regex并验证所有用例:https://pshrmn.github.io/route-tester/
https://stackoverflow.com/questions/48723370
复制相似问题