Question about `id` Attribute in Route Component with react-router-dom

[lusty flicker]

I’ve encountered something I don’t quite understand regarding the id attribute of the Route component and was hoping to get some clarification.

In the API, I noticed that the Route component accepts an id attribute. Here’s a simplified version of my code:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/home" element={<Home />} id="homeRoute" />
      </Routes>
    </Router>
  );
}

I was expecting that the id would appear in the useMatches hook. However, when I log the result of useMatches, I see an array of objects where the id is a random value rather than the id I specified in the Route component.

Here’s how I’m using useMatches:

import { useMatches } from 'react-router-dom';

function ExampleComponent() {
  const matches = useMatches();
  console.log(matches);
  // Expected: [{ id: 'homeRoute', ... }]
  // Actual: [{ id: 'randomValue', ... }]
  return null;
}

Could someone please explain the purpose of the id attribute in the Route component? Is there a specific way I should be using it, or am I misunderstanding its functionality? Any insights or guidance would be greatly appreciated.

Thank you in advance.

[sudden ivy]

I think it may only work when using createBrowserRouter instead of BrowserRouter component, when using the data browser

The Route componet accept it because you can convert the JSX route definition to the object createBrowserRoute accepts

[lusty flicker]

I am actually using the createBrowserRouter api

[sudden ivy]

oh, in your code example you used BrowserRouter as Router