matchPath not working with queryParams in url

So after reading https://github.com/ReactTraining/react-router/issues/4410 it looks like you can’t parse query params just by using react-router-v4.

I now have an issue that means my server-side data fetching doesn’t work (after following https://reacttraining.com/react-router/web/guides/server-rendering) because the matchPath function doesn’t match if you supply query params in the request?

Is there a solution for this?

Or have I simply encountered a bug relating to matchPath?

Example:

const routes = [
    {
        path: '/:locale/plp/.*',
        component: PLPContainer,
        loadData: props => {
          return getData()
        },
        key: 'PLP'
    },
    ...
];

export function collectServerSideCalls(routes, request) {
    const promises = [];
    routes.some(route => {
        const match = matchPath(request.url, route);
        if (match && route.loadData) {
            promises.push(route.loadData(match));
        }
        return match;
    });
    return promises;
}

// When req.url = `/en-gb/plp`
const promises = collectServerSideCalls(routes, req) 
// [ [Function] ]


// When req.url = `/en-gb/plp?fun=123`
const promises = collectServerSideCalls(routes, req) 
// [ ]

[timdorr]

That’s a typo. You should be putting request.path into matchPath (hence the name…)

[timdorr]

A PR would be the best way to get that fixed.