React-router: matchPath not working with queryParams in url

[chrisgreg]

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

[chrisgreg]

@timdorr But then how do I get queryParams out of it inside my routes loadData function if the path is just the url without the queryParams?

EDIT: Clarity - props doesn't contain queryParams so I can't get them inside the Routes loadData call in.

[timdorr]

You'll need to get the search into the returned match's location. Then you can parse it with whatever query parsing library you want.

[chrisgreg]

@timdorr Can you point me into the right direction to do that?

[timdorr]

Sorry, I misspoke. match doesn't have a location. Just pass in the request as a second arg to your loadData function. Or just request.query. Or whatever you want/need to successfully load data in there.

[liuhelen10]

@timdorr is it possible to update the docs so that it specifies that req.path should be passed in rather than url? right now it still says to pass in req.url in two places:

https://reacttraining.com/react-router/web/guides/server-rendering
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/matchPath.md#pathname

[timdorr]

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