React项目中<Link>组件报错：不得在<Router>外使用，页面全白

这个报错的核心原因很明确：你在Navbar组件里使用了<Link>，但该组件没有被React Router的路由容器（比如<BrowserRouter>/<HashRouter>）包裹，导致路由上下文无法被访问，最终触发错误并导致页面白屏。

修复步骤： #

1. 在根组件中添加路由容器
   找到你的项目根组件（通常是App.js或index.js），导入BrowserRouter（推荐用这个替代你导入的基础Router，它更适配浏览器环境），然后用它包裹所有包含路由相关组件的部分：

   import { BrowserRouter as Router } from 'react-router-dom';
   import Navbar from './Navbar';
   
   function App() {
     return (
       <Router>
         <Navbar />
         {/* 后续的<Routes>、<Route>等路由配置也必须放在这个Router内部 */}
       </Router>
     );
   }
   
   export default App;
   

2. 清理Navbar组件的冗余导入
   你的Navbar里导入了Router但并没有使用，直接删掉即可，修改后的代码：

   import React from 'react';
   import { Link } from 'react-router-dom';
   
   const Navbar = () => {
     return (
       <div className='p-5 pb-0 flex flex-wrap sm:justify-between justify-center items-center border-b dark:border-gray-700 border-gray-200'>
           <div className="w-screen flex justify-between items-center space-x-5">
             <Link to="/">
               <p className='text-2xl '>Not Google</p>
             </Link>
           </div>
       </div>
     )
   }
   
   export default Navbar
   

为什么要这么做？ #

React Router的<Link>、<Routes>等组件都依赖路由上下文（Router Context），只有被路由容器包裹的组件才能访问到这个上下文。如果脱离容器使用这些组件，就会触发这个 invariant 校验错误。

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