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.
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.
