Reactjs React路由器4个正则表达式路径-匹配不'；找不到参数

我试图为react router 4进行正则表达式模式匹配，但不幸的是，

this.props.match.params.id

没有正确解析路径，显示为未定义。

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

/全球定位系统

/全球定位系统/航空

/gps/a0b6dc45-11a1-42c5-afdb-a62822d109dc

/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);

从“React”导入React；
从“道具类型”导入道具类型；
从“react router”导入{withRouter，}；
从“react router dom”导入{Switch，Route}；
类Foo扩展了React.Component{
render（）{
console.log（this.props.match）；
返回匹配：{this.props.Match.params.id}
}
} 
const industryRegex=“（航空|发动机|船舶）”；
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}”）；//注意问号？最后
const pathId=`/gps/：id${guidRegex}`；
const pathIndustry=`/gps/：industryType${industryRegex}`；
const path industryandid=`/gps/：industryType${industryRegex}/:id${guidRegex}`；
console.log（路径ID）；
console.log（pathIndustry）；
console.log（路径）；
常量AppComponent=（{…props}）=>{
返回(
)
};
使用路由器导出默认值（AppComponent）；

尝试以下路径

/gps/a0b6dc45-11a1-42c5-afdb-a62822d109dc

会导致

此.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，您可以在此处测试您的正则表达式并验证您的所有用例：

导致

this.props.params.id

未定义，那么

this.props.match.params.id

呢？很抱歉，文本的

this.props.match.params.id

未定义。我面临同样的问题。你能提供你的密码吗？我想我把一些错误传递给了我的朋友？