React中使用<Link>组件链接SignUp与SignIn页面报错求助

这个报错是React Router新手常遇到的问题，核心原因很明确：<Link>是React Router提供的路由导航组件，它必须依赖Router上下文才能正常工作，如果你的<Link>没有被任何Router组件（比如BrowserRouter、HashRouter）包裹，就会抛出这个"Invariant failed"错误。下面是一步步的解决方案：

步骤1：确保安装了react-router-dom #

如果你的项目还没安装路由依赖，先在项目根目录执行命令：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

步骤2：在根组件中添加Router包裹层 #

找到你的项目入口组件（通常是App.js或者index.js），导入BrowserRouter（根据部署场景也可以选HashRouter），然后把包含SignUp、SignIn的整个组件树包裹在<Router>标签内，同时配置路由映射规则：

示例修改后的App.js：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import SignUp from './components/SignUp';
import SignIn from './components/SignIn';

function App() {
  return (
    <Router>
      <Routes>
        {/* 配置SignUp页面的路由 */}
        <Route path="/sign-up" element={<SignUp />} />
        {/* 配置SignIn页面的路由 */}
        <Route path="/sign-in" element={<SignIn />} />
        {/* 默认路由，访问根路径时跳转到SignUp */}
        <Route path="/" element={<SignUp />} />
      </Routes>
    </Router>
  );
}

export default App;

步骤3：修正页面中的导航链接 #

• 你的SignUp.js里的<Link to={'/SignIn'}>注意路径大小写，建议统一用小写（比如/sign-in），和路由配置保持一致，避免路径匹配问题
• 你的SignIn.js里还在用传统的<a href="sign-up.html">，这会触发页面刷新，不符合单页应用的行为，要改成<Link>组件：

先在SignIn.js顶部导入Link：

import { Link } from 'react-router-dom';

然后替换原来的a标签：

<div className='spacing'>New User?&nbsp;<span className='highlight'><Link to="/sign-up">Sign Up</Link></span></div>

小提醒 #

另外注意React组件中的class属性要改成className（比如你SignIn里的class = "pop-up-success"应该写成className="pop-up-success"），这是React的语法规范，虽然不是本次报错的原因，但养成好习惯能避免其他潜在问题。

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