How to redirect from a main page to a specific subpage in React Router v7 Framework Mode?

[rare peak]

I'm trying to set up nested routes in React Router v7 Framework Mode and want /explore to redirect to /explore/skill-path. Here's my current setup:

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

export default [
index("routes/home.tsx"),
route("/explore", "routes/explore/explore.tsx", [
route("scenario", "routes/explore/scenario.tsx"),
route("skill-path", "routes/explore/skill-path.tsx"),
route("project", "routes/explore/project.tsx"),
route("masterclass", "routes/explore/masterclass.tsx"),
]),
] satisfies RouteConfig;`

What I Need:

• Visiting /explore should redirect to /explore/skill-path (URL changes).
• explore.tsx should render as the parent layout with skill-path.tsx in an <Outlet />.
• Other routes (/explore/scenario, etc.) should work as is.

How to redirect from a main page to a specific subpage in React Router v7 Framework Mode?

[loud vortex]

You can add an index in explore route, and do the redirect here

[rare peak]

tried this but its not working

  index("routes/home.tsx"),
  route("/explore", "routes/explore/explore.tsx", [
    index("routes/explore/skill-path.tsx"),
    route("scenario", "routes/explore/scenario.tsx"),
    route("skill-path", "routes/explore/skill-path.tsx"),
    route("project", "routes/explore/project.tsx"),
    route("masterclass", "routes/explore/masterclass.tsx"),
  ]),
  route("/auth", "routes/auth.ts", { id: "auth" }),
] satisfies RouteConfig;```

[molten coral]

don't use the same file, create a separate filewhere you just do a redirect in the loader

[rare peak]

ok got it.
inside that file i can use useNavigate to navigate that what you saying @molten coral .