Proposal: Allow Custom Route Components (e.g., ProtectedRoute) in <Routes> for v6/v7

[MehmetYararVX]

Hi react-router team,

We’re working on a library that aims to provide a simple interface for authorization-based route guarding in apps using react-router-dom@v6 or react-router@v7. Our goal is to let consumers define protected routes declaratively, like so:

import { Router, Routes, ProtectedRoute } from "@org/authz";

export default function App() {
  return (
    <Router>
      <Routes>
        <ProtectedRoute
          path={`${paths.USERS_HOME}/*`}
          resource="users"
          actions="read"
          fallbackUrl={paths.FORBIDDEN}
        >
          <UsersHomePage />
        </ProtectedRoute>
      </Routes>
    </Router>
  );
}

Problem

Currently, <Routes> only accepts direct <Route> elements. Any custom route component (like <ProtectedRoute>) results in a runtime error due to a strict reference check in the source (v6, v7). This makes it impossible to implement reusable, declarative route guards as components.

We’ve reviewed the suggestion of refactoring custom routes and the rationale behind it. While we understand the motivation for this restriction (clarity, static analysis, etc.), it leaves no ergonomic way to encapsulate route logic (like authorization) as a component. Workarounds like HOCs, factory functions, or using the element prop don’t provide the same developer experience or composability as custom route components.

What We’re Requesting

Would you consider a PR that relaxes this restriction, or provides an official extension point for custom route components? For example, allowing a custom component that ultimately renders a <Route> component?

Why This Matters

Many teams want to encapsulate route logic (auth, feature flags, etc.) as components for clarity and reuse. The current restriction forces imperative or less composable patterns. Forking react-router just to remove the reference check is not sustainable.

Summary

We’d love to hear your thoughts on whether you’d accept a PR in this direction.

Similar Issues

• React-router v6 Route composition. Is it possible to render a custom Route?
• How to "wrap" <Route> component so that it can be used inside <Router> in React?

REF: UIEN-8463