web-dev-qa-db-fra.com

Réagissez au routeur 4 chemins de regex - la correspondance ne trouve pas de paramètres

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:

  1. /GPS
  2. / gps/air
  3. / gps/a0b6dc45-11a1-42c5-afdb-a62822d109dc
  4. / gps/air/a0b6dc45-11a1-42c5-afdb-a62822d109dc

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

reactjsreact-routerreact-router-v4
4
Cristian 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/

1
Shayan C