Link component not needing params for a dynamic route and working correctly!
Hi. I'm working on a code that renders different sidebar content based on the current route and for that I have the code below.
The issue is that I'm using a dynamic Link but without passing a params object to it, but the routing still works. The "To" prop only has the string "/$xyz" and somehow it works!
I'm confused on why this is not throwing any errors and is actually routing correctly as from my limited understanding it should not work without passing params. Are the params being inferred here somehow?
import { Link, useMatches } from '@tanstack/react-router'
export function SideBarByRoute() {
const routes = useMatches()
const last = routes[routes.length - 1] // gets the current route obj
const params = last.params
const courseSlug =
'courseSlug' in params && params.courseSlug in repo.dashboards
? params.courseSlug
: null
const bankSlug = 'bankSlug' in params ? params.bankSlug : null
const lessonSlug = 'lessonSlug' in params ? params.lessonSlug : null
const examSlug = 'examSlug' in params ? params.examSlug : null
let initActiveTab = null
if (lessonSlug) {
for (const item of repo.layouts[courseSlug as keyof typeof repo.layouts]) {
const match = item.list.find((l) => l.title === lessonSlug)
if (match) {
initActiveTab = item.title
break
}
}
// add the rest here
}
console.log('sidebar content outlet rendered')
return (
<>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<Link
to={
courseSlug
? '/courses/$courseSlug'
: bankSlug
? '/exams/$bankSlug'
: '/dashboard'
}
>
the repo is a small array holding the dashboard layouts on the frontend.
Apologies if it's a simple question. I'm still learning.
9 Replies
adverse-sapphire•5mo ago
can you please create a complete minimal example by forking one of the existing stackblitz router examples?
ambitious-aquaOP•5mo ago
thanks for your reply. here is a minimal stackblitz setup showing the described behavior.
https://stackblitz.com/edit/vitejs-vite-12vwznxz?file=src%2Froutes%2Findex.tsx
ambitious-aquaOP•5mo ago
sorry, forgot to reply 🙂
adverse-sapphire•5mo ago
i am not sure I understand correctly what your question is here
is it that you dont get a typescript error here?
ambitious-aquaOP•5mo ago
yes. this part throws no erros and redirects correctly replacing the $parentSlug inside the string with the correct param without passing any params
<Link to={parentSlug ? '/parent/$parentSlug' : '/'}>
adverse-sapphire•5mo ago
the reason for that is that the type of the
to value is '/parent/$parentSlug' | '/'
the union of those strings
and this makes the param optional
as for the index route no param existsambitious-aquaOP•5mo ago
ah. so that's why it wouldn't throw errors. but how is it inferring the dynamic segemt correctly
adverse-sapphire•5mo ago
you are linking from the route
/parent/$parentSlug to itself
and here router will keep the path paramambitious-aquaOP•5mo ago
aha. got it. on the actual code, the link was referring to the index view of a route tree in a sidebar with some other links to other child views. So not passing params would work when self referring but an errors is normally thrown. unless its disabled by the conditional check. got it. thanks 🙂