<Link> is the navigation primitive. It renders a real <a href> and calls preventDefault() on the click, so a route change costs a re-render instead of a page load while screen readers still announce a link and Ctrl-click still opens a tab. Use it for every in-app destination and a plain <a> for anything that leaves the app.
to takes a string or a partial Path object. A string is resolved against the current route: a leading slash means "from the root", no leading slash "relative to the route that rendered this link", and .. climbs one matched route — not one URL segment, unless you add relative="path".
<Link to="/courses?sort=name">Courses</Link> {/* absolute */}
<Link to="chemistry">Chemistry</Link> {/* relative to this route */}
<Link to=".." relative="path">Up one URL segment</Link>
<Link to={{ pathname: '/courses', search: '?sort=name', hash: '#top' }}>Object</Link>
<Link to="/login" replace>Log in</Link> {/* no new history entry */}
<Link to="/img/4" state={{ background: location }}>Open</Link> {/* off-URL payload */}replace keeps a login page or a redirect out of the back button's way. state is read back with useLocation().state; it survives a reload but not a paste into a new tab, so use it for hints ("you came from the gallery"), never for data the page needs. Two React Router 5 139,386 habits are now errors: to can no longer be a function of the current location, and there is no component prop — <Link> forwards its ref to the <a>, so wrap it rather than replace it. Every other prop lands on the <a> untouched.