Unavailable nested routes not throwing 404 page
I'm learning Tanstack Router and am trying to implement a basic POC. The issue that I'm facing is that
/about works as expected but /about/xyzis also showing the contents of the about page. This page should ideally show a 404 page.
Any idea what am I missing here?
import { Link, Outlet } from '@tanstack/router';
// import React from 'react'
import { TanStackRouterDevtools } from '@tanstack/router-devtools';
const Navbar = () => {
return (
<>
<nav className='bg-slate-800 px-6 py-3 text-lg text-slate-300 mb-6'>
<ul className='flex items-center gap-10'>
<li>
<Link
to='/'
activeProps={{
className: 'text-slate-100 font-semibold',
}}
>
Home
</Link>
</li>
<li>
<Link
to='/about'
activeProps={{
className: 'text-slate-100 font-semibold',
}}
search={{ lines: 10 }}
activeOptions={{
includeSearch: false,
}}
>
About
</Link>
</li>
{/* <li>
<Link
to='/posts'
activeProps={{
className: 'text-slate-100 font-semibold',
}}
>
Posts
</Link>
</li> */}
</ul>
<TanStackRouterDevtools position='bottom-left' />
</nav>
<Outlet />
</>
);
};
export default Navbar;
import { Link, Outlet } from '@tanstack/router';
// import React from 'react'
import { TanStackRouterDevtools } from '@tanstack/router-devtools';
const Navbar = () => {
return (
<>
<nav className='bg-slate-800 px-6 py-3 text-lg text-slate-300 mb-6'>
<ul className='flex items-center gap-10'>
<li>
<Link
to='/'
activeProps={{
className: 'text-slate-100 font-semibold',
}}
>
Home
</Link>
</li>
<li>
<Link
to='/about'
activeProps={{
className: 'text-slate-100 font-semibold',
}}
search={{ lines: 10 }}
activeOptions={{
includeSearch: false,
}}
>
About
</Link>
</li>
{/* <li>
<Link
to='/posts'
activeProps={{
className: 'text-slate-100 font-semibold',
}}
>
Posts
</Link>
</li> */}
</ul>
<TanStackRouterDevtools position='bottom-left' />
</nav>
<Outlet />
</>
);
};
export default Navbar;
1 Reply
correct-apricotOP•3y ago
here is the routes file
export interface IAboutSearchParams {
lines?: number;
}
const rootRoute = new RootRoute({
component: Navbar,
meta: {
title: 'Home',
},
});
const indexRoute = new Route({
getParentRoute: () => rootRoute,
path: '/',
component: HomePage,
});
const aboutRoute = new Route({
getParentRoute: () => rootRoute,
validateSearch: (search: Record<string, unknown>): IAboutSearchParams => {
return {
lines: Number(search.lines) || undefined,
};
},
path: '/about',
component: AboutPage,
});
const notFoundRoute = new Route({
getParentRoute: () => rootRoute,
path: '*',
component: NotFoundPage,
});
const routeTree = rootRoute.addChildren([
indexRoute,
aboutRoute,
notFoundRoute,
]);
export const router = new Router({ routeTree, defaultPreload: 'intent' });
declare module '@tanstack/router' {
interface Register {
// This infers the type of our router and registers it across your entire project
router: typeof router;
}
}
export interface IAboutSearchParams {
lines?: number;
}
const rootRoute = new RootRoute({
component: Navbar,
meta: {
title: 'Home',
},
});
const indexRoute = new Route({
getParentRoute: () => rootRoute,
path: '/',
component: HomePage,
});
const aboutRoute = new Route({
getParentRoute: () => rootRoute,
validateSearch: (search: Record<string, unknown>): IAboutSearchParams => {
return {
lines: Number(search.lines) || undefined,
};
},
path: '/about',
component: AboutPage,
});
const notFoundRoute = new Route({
getParentRoute: () => rootRoute,
path: '*',
component: NotFoundPage,
});
const routeTree = rootRoute.addChildren([
indexRoute,
aboutRoute,
notFoundRoute,
]);
export const router = new Router({ routeTree, defaultPreload: 'intent' });
declare module '@tanstack/router' {
interface Register {
// This infers the type of our router and registers it across your entire project
router: typeof router;
}
}