React-router中使用Link组件如何完全更换跳转的目标URL？

实现方案分两种最常见的Link组件适用场景： #

React Router 场景

直接给to属性传入以斜杠开头的绝对路径即可，不会拼接当前页面路径：

// 导入组件
import { Link } from 'react-router-dom';

// 组件内调用
<Link to="/categories">跳转到分类页面</Link>

注意不要使用to="categories"的相对路径写法，否则会拼接当前路径生成http://localhost:3000/courses/categories的错误地址

Next.js 场景

Next.js 全版本的Link组件均支持根路径写法：

// 导入组件（App Router和Pages Router导入方式一致）
import Link from 'next/link';

// 组件内调用
<Link href="/categories">跳转到分类页面</Link>

同样避免使用href="categories"的相对路径写法，防止路径拼接错误。

内容的提问来源于stack exchange，提问作者Monoxyd