我正在尝试为 React Router 4 进行正则表达式模式匹配，但不幸的是 this.props.match.params.id 没有正确解析路径，并显示为未定义。

我希望能够访问的路径示例:

1. /全局定位系统
2. /gps/空气
3. /gps/a0b6dc45-11a1-42c5-afdb-a62822d109dc
4. /gps/air/a0b6dc45-11a1-42c5-afdb-a62822d109dc

我的组件:

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 未定义。

非常感谢任何帮助

请您参考如下方法:

您在行业正则表达式末尾缺少一个问号，以将其标记为通过案例 3 的选项。否则，您的正则表达式适用于您所述的所有案例。

固定的正则表达式应如下所示:/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 router 4，您可以在此处测试您的正则表达式并验证您的所有用例:https://pshrmn.github.io/route-tester/