J'essaie de faire correspondre le motif regex pour le routeur de réaction 4, mais malheureusement, lethis.props.match.params.id
n'analyse pas correctement le chemin, et s'affiche comme non défini.
Exemples de chemins auxquels je veux pouvoir accéder:
Mon composant:
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);
Si vous essayez le chemin suivant /gps/a0b6dc45-11a1-42c5-afdb-a62822d109dc
, this.props.match.params.id
sera indéfini.
Toute aide très appréciée
Il vous manque un point d'interrogation à la fin de la regex sectorielle pour le marquer comme une option permettant de faire aboutir votre cas. 3. Sinon, vous utilisez un regex pour tous vos cas déclarés.
La regex fixe devrait ressembler à ceci: /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})?
Conseil pro: Pour le routeur de réaction 4, vous pouvez tester votre expression rationnelle et valider tous vos cas d'utilisation ici: https://pshrmn.github.io/route-tester/