Skip to content

Wrong destination path calculated on navigation when "basepath" is set for Router #4401

Open
@vasiliy-l

Description

@vasiliy-l

Which project does this relate to?

Router

Describe the bug

The issue reproduces when creating Router instance with basepath router option specified.

When navigating via <Link> or using the function from useNavigate hook, it does not work properly if the to property/ option is not specified.
In this case, the core router logic takes fullPath value from the latest route match which does not include the base path part:

// Resolve the next to
const nextTo = dest.to
? this.resolvePathWithBase(fromPath, `${dest.to}`)
: fromPath

The navigation works as expected if the to property/option is specified, as a full or relative path.

Your Example Website or App

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

Steps to Reproduce the Bug or Issue

Create a Router instance with basepath option specified.

const router = createRouter({
  routeTree,
  basepath: '/base', 
  // ...
});

Navigate using <Link> or useNavigate hook. Do not specify to property/option.

// Navigated to /base/some-page 

// Navigates to "/some-page?foo=bar" instead of "/base/some-page?foo-bar"
<Link search={{ foo: 'bar' }}>Update search params</Link>

// Also navigates to "/some-page?foo=bar" instead of "/base/some-page?foo-bar"
const navigate = useNavigate();
navigate({ search: { foo: 'bar'  } });

Expected behavior

When the to property/option is not specified, the destination path is expected be calculated properly including base path.

Screenshots or Videos

No response

Platform

  • OS: any
  • Browser: any
  • Version: "@tanstack/react-router": "^1.121.0"

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions