How to render sub route only?

[aramis-it]

React router 7 framework

import {
  type RouteConfig,
  route,
  index,
} from "@react-router/dev/routes";

export default [
  // parent route
  route("dashboard", "./dashboard.tsx", [
    // child routes
    index("./home.tsx"),
    route("settings", "./settings.tsx"),
  ]),
] satisfies RouteConfig;

Currently its re rendering everything nested on any route change:

• App
• AuthProvider
• Dashbarod
• Home

Expected:

• Dashbarod
• Home

or only render home

[GabenGar]

Where is your AuthProvider declared?

[aramis-it]

Outside router as container component

[sergiodxa]

If a route is nested inside another route, both the parent and child routes will be rendered.

If you want to not render the parent, move the child route outside so it doesn't have that parent route anymore.