What is the reason behind the discrepancy with the trailing '/' between "to" and "from" props?

[mkarajohn]

In our current setup, we are using a singleton with all the available routes, in the form of objects generated through the linkOptions() function. This is a useful pattern because it protects us in case where some route changes, so that we only need to change it in one place.

We use that singleton, like so:

//urls.ts
import { linkOptions } from '@tanstack/react-router';

export const urls = { 
home: () => {
  return linkOptions({ to: '/' })
},
articles: () => {
  return linkOptions({ to: `${urls.home().to}articles` })
}
 }

//example
import { urls } from '~/singletons/urls.ts';

<Link {...urls.articles()}> Go to articles</Link>

That's fine.

The issue arises when I want to use the same urls singleton with something that makes use of from, like for example useSearch()

if I do useSearch({ from: urls.articles().to }) I am getting a type mismatch error, saying that /articles does not match the expected value /articles/

This causes some friction because a mechanism that was otherwise very reusable now becomes not-so-reusable, and to me it's not very obvious why the from prop expects a trailing /.

So, can someone explain why is that so, and, at the end of the day, if there needs to be a discrepancy between from and to expected values?

Thanks.