React Router 6 catch any URL that ends with /debug

Question

I am using React-Router 6.

I have an app with multiple routes

<Routes>
      <Route
        path="/"
        element={<Main />}
      >
        <Route
          path="dashboard"
          element={<div>dashboard</div>}
        />
        <Route
          path="account"
          element={<div>account</div>}
        />
      </Route>
      <Route
        path="login"
        element={<Login />}
      />
// ... more routes
</Routes>

Is there a way to display some react component for any URL that ends with /debug

Solutions I can think of:

• use search params, but the url would look end with ?debug=true, I'd prefer a simple /debug.
• nest a debug route in every route in my Routes component hierarchy, but that's tedious (I have many routes)

Is there a smarter way?

Thank you!

Answer 1

for check the url based on ending of it you can use something like this :

path=":anyPage*/?debug=true