CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4
Cristian E.
Cristian E.

Reputation: 3583

React Router 4 Regex paths - match doesn't find parameters

I'm trying to have regex pattern matching for react router 4, but unfortunately the this.props.match.params.id is not parsing the path correctly, and shows up as undefined.

Examples of paths i want to be able to access:

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

My component:

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

Trying the following path /gps/a0b6dc45-11a1-42c5-afdb-a62822d109dc results in this.props.match.params.id being undefined.

Any help much appreciated

Upvotes: 13

Views: 37660

Answers (1)

Shayan C
Shayan C

Reputation: 1580

You're missing a question mark at the end of the industry regex to mark it as option to pass your case 3. Otherwise you regex works for all your stated cases.

The fixed regex should look like this: /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 tip: For react router 4, you can test your regex and validate all your use cases here: https://pshrmn.github.io/route-tester/

Upvotes: 17

Related Questions