fair-rose

Router TS Issues

Router TS Issue I am having a TS issue on the "to" in my Link component. I am not sure what causes this as I am pretty new to TSR.

<Button variant="outline">
   <Link to="/products/products-list">Cancel</Link>
</Button>

<Button variant="outline">
   <Link to="/products/products-list">Cancel</Link>
</Button>

Error in IDE

Type '"/products/products-list"' is not assignable to type '"/" | "/create-product" | "/create-product/accounting" | "/create-product/change-set" | "/create-product/product" | "/create-product/rates" | "/create-product/review" | "/products-list" | "./" | "../" | undefined'.ts(2322)

Type '"/products/products-list"' is not assignable to type '"/" | "/create-product" | "/create-product/accounting" | "/create-product/change-set" | "/create-product/product" | "/create-product/rates" | "/create-product/review" | "/products-list" | "./" | "../" | undefined'.ts(2322)

my base path for this project is "/products"

 <RouterProvider router={router} basepath="/products" />

 <RouterProvider router={router} basepath="/products" />

any ideas?

13 Replies

rival-black•14mo ago

i see a "/products-list" in your route tree. maybe check your route path declaration and make sure it's got that products preface

genetic-orange•14mo ago

When navigating, you just enter the routes available like /, /create-product, /create-product/change-set. You don't prepend your basePath over here. That's automatically done by the Router during navigation. If your basePath is /products and you call navigate to /create-product/change-set then what's finally written to the browser URL is /products/create-product/change-set

fair-roseOP•14mo ago

@Sean Cassiere Thanks. And that's what I would expect. However, I am getting a litting issue on the "to" even when I have the paths typed correctly and the the navigation works. So don't know why the error. given:

navigate({ to: 'products-list' });

navigate({ to: 'products-list' });

I get

Type '"products-list"' is not assignable to type '"/" | "/create-product" | "/products-list" | "/create-product/accounting" | "/create-product/change-set" | "/create-product/product" | "/create-product/rates" | "/create-product/review" | "./" | "../" | undefined'. Did you mean '"/products-list"'?ts(2820)
link.d.ts(43, 5): The expected type comes from property 'to' which is declared here on type 'NavigateOptions<Router<Route<any, "/", "/", string, "__root__", {}, {
}, {}, {}, {}, {}, {}, RouteContext,

Type '"products-list"' is not assignable to type '"/" | "/create-product" | "/products-list" | "/create-product/accounting" | "/create-product/change-set" | "/create-product/product" | "/create-product/rates" | "/create-product/review" | "./" | "../" | undefined'. Did you mean '"/products-list"'?ts(2820)
link.d.ts(43, 5): The expected type comes from property 'to' which is declared here on type 'NavigateOptions<Router<Route<any, "/", "/", string, "__root__", {}, {
}, {}, {}, {}, {}, {}, RouteContext,

when I do this

navigate({ to: '/products-list' });

navigate({ to: '/products-list' });

there is no linting error, but this happens:

fair-roseOP•14mo ago

xenial-black•14mo ago

can you please provide a complete minimal example by forking one of the existing router examples on stackblitz ?

fair-roseOP•14mo ago

Yeah, I will try that. Thanks.

fair-roseOP•14mo ago

https://stackblitz.com/edit/tanstack-router-yw832e

Jeff Kinley

StackBlitz

Router Problem - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

fair-roseOP•14mo ago

I kinda get what the problem is, but not sure how to fix. When you use <Link to=/products-list'> it matches the base route 'products' and then the URL ends up being /products/-list. But surely you should be able to have a "/products/products-list" URL.

genetic-orange•14mo ago

The TS-error looks to be correct, but at runtime the invalid matching shouldn't be happening. I've created an issue for it. https://github.com/TanStack/router/issues/2019 I recommend you subscribe to the issue on GitHub

GitHub

Issue resolving navigations to routes when the basepath partially m...

Describe the bug From https://discord.com/channels/719702312431386674/1265399137105481759 Your Example Website or App https://stackblitz.com/edit/tanstack-router-yw832e?file=src%2Fmain.tsx Steps to...

fair-roseOP•14mo ago

Thanks Sean. Nice to know I am not crazy. Hope this helps.

xenial-black•14mo ago

i am fixing this at the moment

xenial-black•14mo ago

fixed in https://github.com/TanStack/router/releases/tag/v1.45.10

GitHub

Release v1.45.10 · TanStack/router

Version 1.45.10 - 7/24/24, 9:34 PM Changes Fix correctly resolve paths when basepath is set (#2021) (dadc0eb) by Manuel Schiller Packages @tanstack/react-router@1.45.10 @tanstack/router-devtools...

fair-roseOP•14mo ago

thanks all. Great turn around.

Gaming

Programming

Router TS Issues

Did you find this page helpful?