<Link to=".."/> going up 2 paths instead of 1

[agcty]

This is not necessarily an issue but just something that needs to be pointed out once. If you have a file structure like this (using the flat-routes convention):

$id.tags.add.index
$id.tags.add.manual

and $id.tags.add.manual looks somewhat like this:

export default function Manual() {
  return <Link to="..">Back</Link>
}

if you click on the link, it will actually go to /tags instead of /tags/add. This is both unexpected and expected.

Expected in the sense these two routes are separate from each other and don't share a/tags/add layout. Unexpected in the sense that you'd assume "going up" one path should result in the URL changing from/tags/add/manual -> /tags/add.

The solution is to just create a third route /tags/add that doesn't do anything else other than return <Outlet/>:

// $id.tags.add
import { Outlet } from "@remix-run/react"

export default function Add() {
  return <Outlet />
}

[kiliman]

Remix, due to React Router, does relative navigation at the route level, not URL path. So when you go .., it's actually moving to the parent route, in this case $id.tags.

RR 6.4 introduced a new <Link relative="path">[1] prop that works like you want. Unfortunately Remix is currently pinned to 6.3.

In the meantime, you will need to manually calculate the correct relative path.

NOTE: If you have index routes, I strongly recommend adding a trailing /. This will ensure relative paths work correctly.

Anyway, just update your link to <Link to="./">

This will navigate from /tags/add/manual to /tags/add/ which is your index route.

---

[1] https://reactrouter.com/en/main/components/link#relative

[agcty]

Thanks, wasn't aware of this! That's much easier to use.