web-dev-qa-db-ja.com

Reactルーター4正規表現パス-一致するパラメーターが見つかりません

React Router 4の正規表現パターンマッチングを試みていますが、残念ながらthis.props.match.params.idはパスを正しく解析せず、未定義として表示されます。

アクセスできるようにしたいパスの例：

  1. /GPS
  2. / gps/air
  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が未定義になります。

どんな助けも大歓迎

reactjsreact-routerreact-router-v4
7
Cristian E.

業界正規表現の最後に、ケース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})?

プロのヒント：反応ルーター4の場合、正規表現をテストし、すべてのユースケースをここで検証できます： https://pshrmn.github.io/route-tester/

6
Shayan C