Extend <Route> element of react-router-dom to run custom logic on route match

Viewed 30

I'm using react-router v6 and I want to be able to have the following snippet in my code, and have document.title to be set to the value specified in title attribute of the Route element.

<Routes>
  <Route path="/groups" element={<GroupsPage />} title='Groups - Student Portal`/>
  <Route path="/classes" element={<ClassesPage />} title='Classes - Student Portal`/>
</Routes>

I can't seem to find a hook that would give me a currently matched route without parsing the routes myself or storing them as a javascript object.
Question #1: is there a way to get properties of a currently matched route?

Additionally, Routes implementation of createRoutesFromChildren link is not OCP-friendly. I can't think of a way to solve this without rewriting both Routes and Route with a slight modification just to allow extra properties on a route.
Question #2: how can I add custom properties to the Route element?

0 Answers
Related