webentwicklung-frage-antwort-db.com.de

Reagiere Router 4 Regex-Pfade - Übereinstimmung findet keine Parameter

Ich versuche Regex-Matching für den Reakt-Router 4 durchzuführen, aber leider analysiert derthis.props.match.params.id den Pfad nicht korrekt und erscheint als undefiniert.

Beispiele für Pfade, auf die ich zugreifen möchte:

  1. /Geographisches Positionierungs System
  2. / gps/luft
  3. / gps/a0b6dc45-11a1-42c5-afdb-a62822d109dc
  4. / gps/air/a0b6dc45-11a1-42c5-afdb-a62822d109dc

Meine Komponente:

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

Wenn Sie den folgenden Pfad /gps/a0b6dc45-11a1-42c5-afdb-a62822d109dc ausprobieren, wird this.props.match.params.id nicht definiert.

Jede Hilfe sehr geschätzt

4
Cristian E.

Am Ende der Branchenregulierung fehlt ein Fragezeichen, um es als Option für das Bestehen Ihres Falls zu markieren. 3. Ansonsten funktionieren Sie für alle Ihre angegebenen Fälle.

Der fixierte Regex sollte folgendermaßen aussehen: /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})? 

Pro-Tipp: Für den Reakt-Router 4 können Sie Ihren Regex testen und alle Ihre Anwendungsfälle hier überprüfen: https://pshrmn.github.io/route-tester/

1
Shayan C