reactjs – React Router 4 Regex路径 – 匹配找不到参数
发布时间:2020-12-15 16:15:18 所属栏目:百科 来源:网络整理
导读:我正在尝试为反应路由器4进行正则表达式模式匹配,但不幸的是this.props.match.params.id没有正确解析路径,并显示为未定义. 我希望能够访问的路径示例: / gps / gps / air / gps / a0b6dc45-11a1-42c5-afdb-a62822d109dc / gps / air / a0b6dc45-11a1-42c5-a
我正在尝试为反应路由器4进行正则表达式模式匹配,但不幸的是this.props.match.params.id没有正确解析路径,并显示为未定义.
我希望能够访问的路径示例: > / gps 我的组件: 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路由器4,您可以在此处测试正则表达式并验证所有用例:https://pshrmn.github.io/route-tester/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |