Dynamic Link provided in <Link to />

[vuckookv3]

Describe the Bug

I want to create navbar with specific links.

I defined links in specific variable, but I am getting error in Link to prop.

The error is: Type 'string' is not assignable to type '(To & "/") | (To & "/admin") | (To & "/admin/dashboard") | (To & "/admin/dashboard/users")

How do I deal with this?

Generouted Version

1.18.4

Your Example Website or App or Reproduction

Don't have repo

Steps to Reproduce the Bug or Issue

I think the image is self explanatory.

Expected Behavior

I need a way to provide links without TS error.

Screenshots or Videos

Platform

• OS: Windows WSL
• Browser: Chrome
• Browser version: Latest

Additional context

No response

[oedotme]

@vuckookv3 This needs more specific typing — Could you try using as const? If you want to get auto-completion and type-checking at the data array as well, you could use satisfies {...}. Here's an example of them combined:

import { Path } from '../../src/router'

const data = [
  { link: '/admin/dashboard`, label: 'Home', icon: IconHome2 },
  { link: '/admin/dashboard/users`, label: 'Users', icon: IconUsers },  
] as const satisfies { link: Path; label: string; icon: typeof IconHome2 }[]

Hope that helps!

[vuckookv3]

@oedotme I have tried this, but still the same error:

And the error is:

[oedotme]

That's strange, It didn't error when I tried it out. Could you please share a StackBlitz demo with this example and I'll take a look.

[vuckookv3]

I was just making an example, but saw that on Stackblitz I wasn't getting that error...

Turns out when I posted this 5 days ago, it was still version 1.18.4, which I had on my local. But on StackBlitz it was 1.18.5 which u updated 4 days ago...

So problem is resolved in this version :)