React Router/7/Relative Links

Last update

Oct 8, 2024

This transformation updates elements within route trees to include an extra relative segment. This ensures that links continue to point to the correct locations after the route structure changes.

Before

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="/">Dashboard Home</Link>
        <Link to="team">Team</Link>
        <Link to="projects">Projects</Link>
      </nav>
    </div>
  );
}

After

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="../">Dashboard Home</Link>
        <Link to="../team">Team</Link>
        <Link to="../projects">Projects</Link>
      </nav>
    </div>
  );
}

This transformation updates elements within route trees to include an extra relative segment. This ensures that links continue to point to the correct locations after the route structure changes.

Before

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="/">Dashboard Home</Link>
        <Link to="team">Team</Link>
        <Link to="projects">Projects</Link>
      </nav>
    </div>
  );
}

After

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="../">Dashboard Home</Link>
        <Link to="../team">Team</Link>
        <Link to="../projects">Projects</Link>
      </nav>
    </div>
  );
}

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now