React项目中react-router-dom的<Link>组件报错修复求助

以下是React项目中使用react-router-dom的<Link>组件时，Navbar引发报错的常见原因及对应修复方案：

1. 组件未在路由上下文内使用 #

<Link>必须包裹在<BrowserRouter>/<HashRouter>等Router组件的上下文环境中，否则会抛出类似useNavigate() may be used only in the context of a <Router> component的错误。

修复示例：
在根组件（如App.js）或PortfolioContainer外层添加Router包裹：

import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Navbar />
      <PortfolioContainer />
    </Router>
  );
}

2. 错误导入<Link>组件 #

若误导入其他库的Link组件，或拼写错误（如小写link），会导致组件无法正常识别。

修复：
确保从react-router-dom正确导入：

// Navbar组件内
import { Link } from 'react-router-dom';

3. <Link>属性使用错误 #

<Link>组件使用to属性指定跳转路径，而非普通a标签的href属性，误用会引发路由逻辑错误。

正确用法：

<Link to="/home">首页</Link>
<Link to="/portfolio">作品集</Link>

错误示例（需修正）：

<Link href="/home">首页</Link>

4. React Router版本兼容性问题 #

react-router-dom v6与v5 API差异较大，若代码基于v5写法在v6环境运行，可能出现兼容性报错。

v6环境下的路由配置示例：

// PortfolioContainer内的路由配置
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import Portfolio from './Portfolio';

function PortfolioContainer() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/portfolio" element={<Portfolio />} />
    </Routes>
  );
}

若需回退到v5，可执行安装命令：

npm install react-router-dom@5

5. 组件脱离路由上下文（罕见） #

若Navbar被嵌套在高阶组件或Portal中，可能脱离路由上下文，导致<Link>失效。

替代方案：
使用NavLink（支持激活状态，用法与Link一致），或用useNavigate钩子手动实现跳转：

import { NavLink, useNavigate } from 'react-router-dom';

// 使用NavLink
<NavLink to="/home" className={({ isActive }) => isActive ? 'active' : ''}>
  首页
</NavLink>

// 使用useNavigate实现跳转
function Navbar() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/home')}>首页</button>
  );
}

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