TanStack / router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
https://tanstack.com/router
MIT License
7.19k stars 486 forks source link

Paths keep getting appended #1536

Closed martylukyy closed 2 weeks ago

martylukyy commented 2 weeks ago

Describe the bug

Starting with 1.31.1 there seems to be a bug where path will just keep getting appended to the URL. 1.31.0 does not have that issue.

Your Example Website or App

https://stackblitz.com/edit/github-bmyvvc?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

  1. On the Dashboard go to Settings
  2. Click one of the two settings option with appends a 1 or 2 to the URL respectively
  3. Click either one of the options again (doesn't matter which one you clicked first)
  4. URL will get either 1s or 2s appended endlessly depending on which option you click.

Expected behavior

Prior to 1.31.1 it would not append endlessly and switch paths from 1 to 2 (or from 2 to 1) as expected.

Screenshots or Videos

No response

Platform

All

Additional context

EDIT: Upon hitting Dashboard/Settings/1/2 a NotFound error is being triggered.

SeanCassiere commented 2 weeks ago

This is not a bug.

TLDR; This happened because the <Link>'s had invalid to paths.

The reproducer has the <Link> tags pointing to invalid routes. The reproducer doesn't throw any errors about the invalid paths since the module declaration block of code is not present.

Once adding this block, the to path completion correctly errors out on the invalid paths.

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

Also, can confirm even with the invalid paths being added in, the route matching correctly worked and didn't lag behind or persist in showing the wrong route.

https://github.com/TanStack/router/assets/33615041/3c766a6c-efdb-4a33-ad91-edb62c0a3092

Updating the <Link>s to use the correct pathing fixes this. Like:

<Link to='/settings/1'>1</Link>
last-Programmer commented 1 week ago

I am facing this issue with the latest version and i have all the paths correct. i started with 1.17.4 and it works with that version. The bug started happening from version 1.22.4. Upto 1.22.3 it is working fine. i am using code based routing.

SeanCassiere commented 1 week ago

I am facing this issue with the latest version and i have all the paths correct. i started with 1.17.4 and it works with that version. The bug started happening from version 1.22.4. Upto 1.22.3 it is working fine. i am using code based routing.

@last-Programmer make sure you to paths as either absolute like /posts/edit or use the from property to be access to relative pathing. Typescript will tell you when you enter an invalid path.

last-Programmer commented 5 days ago

@SeanCassiere My paths are absolute in code based routing and i have this code and typescript does not say any error and it compiles successfully. not sure what am i missing.

const rootRoute = createRootRoute({
    component: () => <div />,
    notFoundComponent: () => <RouterNoMatch />
});

const routeTree = createRouteTree(rootRoute);

const router = createRouter({
    routeTree
});

declare module "@tanstack/react-router" {
    interface Register {
        router: typeof router
    }
}
SeanCassiere commented 5 days ago

@SeanCassiere My paths are absolute in code based routing and i have this code and typescript does not say any error and it compiles successfully. not sure what am i missing.

const rootRoute = createRootRoute({
    component: () => <div />,
    notFoundComponent: () => <RouterNoMatch />
});

const routeTree = createRouteTree(rootRoute);

const router = createRouter({
    routeTree
});

declare module "@tanstack/react-router" {
    interface Register {
        router: typeof router
    }
}

@last-Programmer please create a new issue with a reproduction so it can be looked into. You can create a code-based reproduction using this Router code-based stackblitz starter or a file-based one using Router file-based stackblitz starter.