React-router: Match params are mixed with search using react-router-config

[amangeot]

Hello,
I have an issue on server with the value of matched params:

Rendering /items/10, match.params.id will equal 10 as expected
Though rendering /items/10?test=1, match.params.id equals 10?test=1, the search gets included in params.

---

Here is how I declare a route to be used with react-router-config:

{
    path: '/items/:id',
    exact: true,
    component: ItemsRedirect,
}

Here is how I retrieve and pass the match to my fetchData producing the results above, using react-router-config:

      const routes = makeRoutes(store, req)
      const branch = matchRoutes(routes, req.url)

      // Fetch data required by matched components
      const data = await Promise.all(branch.map(({ route, match }) => {
        const { fetchData } = route.component
        return fetchData instanceof Function ? fetchData(store, match) : Promise.resolve(null)
      }))

With "react-router-config": "1.0.0-beta.4",

[timdorr]

We don't process query strings at all in 4.0. You would need to add an optional section to your path pattern to make that work, but it would be up to you to parse the query string further.

[amangeot]

When processing this url /items/10?test=1 based on the pattern /items/:id

1/ withRouter will give a match.params.id equal to 10 as expected,
2/ react-router-config will offer a match.params.id equal to 10?test=1

Is it intended to have a different match between matchRoutes and withRouter?

The match given to routes' component doesn't include the search either (same behaviour as withRouter).

[pshrmn]

RR uses path-to-regexp for route matching. path-to-regexp only does pathname matching. Instead of passing req.url (which contains the pathname, search, and hash segments), you should use req.path.

Alternatively, you should be creating a history object, in which case you could pass the pathname from the current location to matchRoutes.

const history = createMemoryHistory({ initialEntries: [req.url] });
matchRoutes(routes, history.location.pathname);