Monitor route change and active element
Is there anything/code I can insert into my App.js so that whenever the route change, it console log the current route path and element? Anything from 'react' library? I don't know.
Routes in my App.js:
import { Refine } from "@refinedev/core";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
<BrowserRouter>
<Refine
routerProvider={routerBindings}
resources={[{
name: "users",
list: "/users",
}, {
name: "canvases",
list: "/canvases",
},]}
>
<Routes>
<Route
element={
<Authenticated>
<ThemedLayoutV2 Title={Title}>
<CanAccess>
<Outlet />
<LogRouteChanges />
</CanAccess>
</ThemedLayoutV2>
</Authenticated>
}
>
<Route index element={<NavigateToResource />} />
<Route path="/users" element={<UserList />} />
<Route path="/canvases" element={<CanvasList />} />
</Route>
</Routes>
<Refine>
</BrowserRouter>
Routes in my App.js:
import { Refine } from "@refinedev/core";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
<BrowserRouter>
<Refine
routerProvider={routerBindings}
resources={[{
name: "users",
list: "/users",
}, {
name: "canvases",
list: "/canvases",
},]}
>
<Routes>
<Route
element={
<Authenticated>
<ThemedLayoutV2 Title={Title}>
<CanAccess>
<Outlet />
<LogRouteChanges />
</CanAccess>
</ThemedLayoutV2>
</Authenticated>
}
>
<Route index element={<NavigateToResource />} />
<Route path="/users" element={<UserList />} />
<Route path="/canvases" element={<CanvasList />} />
</Route>
</Routes>
<Refine>
</BrowserRouter>
