Add href param to ComponentProps for relative, typesafe, routes.

[kentcdodds]

Here's what I did before the href utility was introduced:

export default function EditUserProfile({ loaderData }: Route.ComponentProps) {
	return (
		<div className="flex flex-col gap-12">
			<Link
				preventScrollReset
				to="photo"
				title="Change profile photo"
				aria-label="Change profile photo"
			>
				<Icon name="camera" className="h-4 w-4" />
			</Link>

			<Link to="change-email">
				<Icon name="envelope-closed">
					Change email from {loaderData.user.email}
				</Icon>
			</Link>
			<Link to="two-factor">
				{loaderData.isTwoFactorEnabled ? (
					<Icon name="lock-closed">2FA is enabled</Icon>
				) : (
					<Icon name="lock-open-1">Enable 2FA</Icon>
				)}
			</Link>
			<Link to={loaderData.hasPassword ? 'password' : 'password/create'}>
				<Icon name="dots-horizontal">
					{loaderData.hasPassword ? 'Change Password' : 'Create a Password'}
				</Icon>
			</Link>
			<Link to="connections">
				<Icon name="link-2">Manage connections</Icon>
			</Link>
			<Link to="passkeys">
				<Icon name="passkey">Manage passkeys</Icon>
			</Link>
			<Link
				reloadDocument
				download="my-epic-notes-data.json"
				to="/resources/download-user-data"
			>
				<Icon name="download">Download your data</Icon>
			</Link>
		</div>
	)
}

Here's what I do now that we have it:

import { href } from 'react-router'

export default function EditUserProfile({ loaderData }: Route.ComponentProps) {
	return (
		<div className="flex flex-col gap-12">
			<Link
				preventScrollReset
				to={href('/settings/profile/photo')}
				title="Change profile photo"
				aria-label="Change profile photo"
			>
				<Icon name="camera" className="h-4 w-4" />
			</Link>
			<Link to={href('/settings/profile/change-email')}>
				<Icon name="envelope-closed">
					Change email from {loaderData.user.email}
				</Icon>
			</Link>
			<Link to={href('/settings/profile/two-factor')}>
				{loaderData.isTwoFactorEnabled ? (
					<Icon name="lock-closed">2FA is enabled</Icon>
				) : (
					<Icon name="lock-open-1">Enable 2FA</Icon>
				)}
			</Link>
			<Link
				to={
					loaderData.hasPassword
						? href('/settings/profile/password')
						: href('/settings/profile/password/create')
				}
			>
				<Icon name="dots-horizontal">
					{loaderData.hasPassword ? 'Change Password' : 'Create a Password'}
				</Icon>
			</Link>
			<Link to={href('/settings/profile/connections')}>
				<Icon name="link-2">Manage connections</Icon>
			</Link>
			<Link to={href('/settings/profile/passkeys')}>
				<Icon name="passkey">Manage passkeys</Icon>
			</Link>
			<Link
				reloadDocument
				download="my-epic-notes-data.json"
				to={href('/resources/download-user-data')}
			>
				<Icon name="download">Download your data</Icon>
			</Link>
		</div>
	)
}

I like this because it's typesafe. I don't like it because I lost my relative paths.

What if we could do this:

// notice that href comes from props!
export default function EditUserProfile({ loaderData, href }: Route.ComponentProps) {
	return (
		<div className="flex flex-col gap-12">
			<Link
				preventScrollReset
				to={href('photo')}
				title="Change profile photo"
				aria-label="Change profile photo"
			>
				<Icon name="camera" className="h-4 w-4" />
			</Link>
			<Link to={href('change-email')}>
				<Icon name="envelope-closed">
					Change email from {loaderData.user.email}
				</Icon>
			</Link>
			<Link to={href('two-factor')}>
				{loaderData.isTwoFactorEnabled ? (
					<Icon name="lock-closed">2FA is enabled</Icon>
				) : (
					<Icon name="lock-open-1">Enable 2FA</Icon>
				)}
			</Link>
			<Link
				to={
					loaderData.hasPassword
						? href('password')
						: href('password/create')
				}
			>
				<Icon name="dots-horizontal">
					{loaderData.hasPassword ? 'Change Password' : 'Create a Password'}
				</Icon>
			</Link>
			<Link to={href('connections')}>
				<Icon name="link-2">Manage connections</Icon>
			</Link>
			<Link to={href('passkeys')}>
				<Icon name="passkey">Manage passkeys</Icon>
			</Link>
			<Link
				reloadDocument
				download="my-epic-notes-data.json"
				to={href('/resources/download-user-data')}
			>
				<Icon name="download">Download your data</Icon>
			</Link>
		</div>
	)
}

Notice that we get relative back and they can be typesafe.

[okalil]

That would be awesome, relative paths are one of the best parts of RR Links.

[gabro]

Same need: I've refactored a piece of my app to use href and one drawback is that when you have dynamic params (e.g., navigating from /user/1/foo to /user/1/bar), you now need to access the params only to feed it back to href and build the absolute URL.

What @kentcdodds proposed would elegantly solve the issue, and it seems very doable in the current typegen architecture.