How to dynamically register route?

[Thebarda]

Hello, I have the following code

const rootRoute = createRootRoute({
	component: Root,
	notFoundComponent: () => {
		return (
			<div>
				<p>This is the notFoundComponent configured on root route</p>
				<Link to="/login">Start Over</Link>
			</div>
		);
	},
});

const loginRoute = createRoute({
	path: "/login",
	getParentRoute: () => rootRoute,
}).lazy(() => import("./Login.lazy").then((d) => d.Route));

export const allRoutes = createRoute({
	path: "$",
	component: GlobalDashboard,
	getParentRoute: () => rootRoute,
});

const dashboard = createRoute({
	component: Dashboard,
	path: "/dashboard",
	getParentRoute: () => allRoutes,
});

const routeTree = rootRoute.addChildren([
	loginRoute,
	allRoutes.addChildren([dashboard]),
]);

const router = createRouter({
	routeTree,
});

But in another component (Dashboard), I want to register another route, in order to simulate a protected route controlled by the frontend.

	const dashboardIdRoute = createRoute({
		component: DashboardId,
		path: "/dashboard/$dashboardId",
		getParentRoute: () => allRoutes,
	});

        routeTree.addChildren([allRoutes.addChildren([dashboardIdRoute])]);

but it gives me path is undefined, how can I end up add a route in a component? Is it possible?

Thanks.

[schiller-manuel]

I would advise against using dynamic registration. Even if it works, if it is not known statically, you won't get any typesafety for that route.

Instead, I prefer using a beforeLoad that checks a certain condition and throws a redirect() in case the route shall not be accessible.

[Thebarda]

Ok thanks for the advise, it makes sense