[v6] useMatch params is always empty

[shahafa]

I'm trying to migrate v5 to v6,

I have the following routes and Page component

          <Routes>
            <Route path="/page">
              <Route path=":id" element={<Page />} />
              <Route index element={<Page />} />
            </Route>
          </Routes>

const Page = () => {
  const location = useLocation();
  const match = useMatch(location.pathname);
  console.log(match);
  ...

I navigate to /page/123 and print match inside the Page component
the match params attribute is an empty object and not including the id

params: {}
pathname: "/page/123"
pathnameBase: "/page/123"
pattern:
  caseSensitive: false
  end: true
  path: "/page/123"

Am I missing something or this is a bug?

I also tried

          <Routes>
              <Route path="/page/:id" element={<Page />} />
              <Route path="/page" element={<Page />} />
          </Routes>

Same problem

[Grapedge]

You should pass a pattern to useMatch.
For your code, assuming we are visiting the detail page,

location.pathname // => /page/123
useMatch(location.pathname) // => useMatch('/page/123')

So, we treat /page/123 as a pattern, in which there are no parameters, if you want to get params, you need to pass /page/:id.

And you can solve it this way:

<Route path="/page/:id" element={<Page path="/page/:id" />} />
// ...
useMatch(props.path) // => useMatch('/page/:id')

In addition, I think this method may not be recommended, because we have a more suitable useParams to get the parameters:

const params = useParams()