T
TanStack3y ago
optimistic-gold

Link not typed correctly, missing routes

With the following setup code:
const rootRoute = new RootRoute();

const authenticatedRoutes = new Route({
getParentRoute: () => rootRoute,
path: "/",
onLoad: authGuardLoader,
});

const loginRoute = new Route({
getParentRoute: () => rootRoute,
path: "/login",
onLoad: loginLoader,
component: Login,
});

const welcomeRoute = new Route({
path: "/welcome",
getParentRoute: () => authenticatedRoutes,
component: Welcome,
});

const workspacesRoute = new Route({
path: "/workspaces",
getParentRoute: () => authenticatedRoutes,
component: Workspaces,
onLoad: workspacesLoader,
});

authenticatedRoutes.addChildren([welcomeRoute, workspacesRoute]);

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

const router = new Router({ routeTree });

declare module "@tanstack/router" {
interface Register {
router: typeof router;
}
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
const rootRoute = new RootRoute();

const authenticatedRoutes = new Route({
getParentRoute: () => rootRoute,
path: "/",
onLoad: authGuardLoader,
});

const loginRoute = new Route({
getParentRoute: () => rootRoute,
path: "/login",
onLoad: loginLoader,
component: Login,
});

const welcomeRoute = new Route({
path: "/welcome",
getParentRoute: () => authenticatedRoutes,
component: Welcome,
});

const workspacesRoute = new Route({
path: "/workspaces",
getParentRoute: () => authenticatedRoutes,
component: Workspaces,
onLoad: workspacesLoader,
});

authenticatedRoutes.addChildren([welcomeRoute, workspacesRoute]);

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

const router = new Router({ routeTree });

declare module "@tanstack/router" {
interface Register {
router: typeof router;
}
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
Using a <Link to="/workspaces"> in the Welcome component only has / & /login as valid routes.
3 Replies
optimistic-gold
optimistic-goldOP3y ago
The app works though, it's just typescript shouting. I've tried TypeScript: Restart TS Server from the VSCode command palette
ambitious-aqua
ambitious-aqua3y ago
if you're using loader you need to provide loader context too and if you have a route with children it should be under route tree
ambitious-aqua
ambitious-aqua3y ago
GitHub
portfolio/router.tsx at main · bachitterch/portfolio
Contribute to bachitterch/portfolio development by creating an account on GitHub.

Did you find this page helpful?