Conditionally render a component with new data-api routers

[yusuphgammut]

Hi reaact-router team. Potentially dumb question here.

Before the new data-api routers I was doing conditional rendering of components as usual in React:

<Route
  path={myPath}
  element={hasPermission() ? <SecretPage /> : <NotAllowedPage />}
/>

However, I'm upgrading the routes to the new recommended static route definition for data-api routers, but now I'm not sure how to perform the conditional rendering shown above, since the new routes are statically defined. For now I've managed to solve it using a redirect from loader like this:

{
  path: myPath,
  loader: (): Response | null => {
    return hasPermission() ? null : redirect("/not-allowed");
  },
  element: <SecretPage />,
},
{ path: "/not-allowed", element: <NotAllowedPage /> },

Is this the expected way to migrate in this case or is there a better way to do it?