T
TanStack•2y ago
ratty-blush

Unable to navigate using relative links

I'm running into an issue where I can't seem to navigate to a specific page from another page using relative links. This is my react component: 
function DeviceLink({ id, name }: DeviceLinkProps) {
  const location = useLocation()
  console.log(`Location: ${JSON.stringify(location)}`)
  return <Link from={location.pathname} to={`./${id}/`}>{name}</Link>
}
function DeviceLink({ id, name }: DeviceLinkProps) {
  const location = useLocation()
  console.log(`Location: ${JSON.stringify(location)}`)
  return <Link from={location.pathname} to={`./${id}/`}>{name}</Link>
}
My from route path is /org/e096e8c3-ceaf-4cc2-ba8e-116b981a8c92/product/8c1e9150-3b55-47d4-b63b-a1d7e6912361/devices and the to path is shown above in the react component. I get this error in the console: Error: Invariant failed: Could not find match for from: /org/e096e8c3-ceaf-4cc2-ba8e-116b981a8c92/product/8c1e9150-3b55-47d4-b63b-a1d7e6912361/devices/93f77c03-8ac0-4425-9d97-842991a77196 I have no idea what I'm missing or doing wrong. Anyone run into this issue before? Not sure if it's a bug...
2 Replies
rare-sapphire
rare-sapphire•2y ago
you cannot use the pathname as from it can only be a route path such as /org/$id/product
harsh-harlequin
harsh-harlequin•2y ago
I think this falls under the category of unsafe relative navigation and from probably provides no purpose because I think it automatically uses the current location if no from is provided. from is an assertion that matches the current location with fullPath providing type safe relative navigation with type safe search and params

Did you find this page helpful?