React.js如何将href标签转为react-router-dom Link组件并解决路由报错

这个错误和你使用的Bootstrap、现有项目结构、样式实现方式完全无关。Link、NavLink这类react-router-dom提供的导航组件，完全依赖上层组件树注入的Router上下文才能正常工作，只要组件外层没有被Router根组件包裹，就会触发这个固定的invariant校验报错。

• 不需要重搭项目、不需要放弃Bootstrap改用CSS-in-JS、也不需要单独创建独立的Router.js文件，按照以下顺序调整即可：
  1. 在应用最外层挂载Router根组件
     打开项目入口文件（通常是src/index.js），将整个App组件用BrowserRouter（即浏览器History模式的Router）包裹，保证所有用到Link的组件都在Router的上下文覆盖范围内。参考代码：

     import { BrowserRouter as Router } from "react-router-dom";
     // 原有导入、渲染逻辑保持不变
     const root = ReactDOM.createRoot(document.getElementById("root"));
     root.render(
       <Router>
         <App />
       </Router>
     );
     

     这是当前报错的最直接解决点：你现在在App内部直接导入Link使用，却没有在应用最外层挂载Router，导致Link找不到对应的上下文服务，直接抛出错误。
  2. 修正路由路径的写法
     你之前写的to="../components/About"是文件系统的目录相对路径，不属于React Router的合法路由值。后续配置路由时，会给每个页面组件分配独立的URL路径（比如给About页分配路径/about），对应的Link的to属性需要和配置的路由路径完全一致，不能用文件目录路径当路由参数。
  3. 替换原有锚点时保留原有样式类
     把原生<a>标签替换成Link/NavLink时，直接把原来写在a标签上的className照样传到Link组件上即可，Bootstrap的导航样式不会因为组件替换失效。比如原导航项可以调整为：

     <li className="nav-item">
       <NavLink className="nav-link" to="/about">About me</NavLink>
     </li>
     

     使用NavLink还能自动识别当前激活的路由，自动加上active类，刚好匹配Bootstrap导航的高亮样式逻辑。
  4. 配置路由出口
     目前你在App.js中是直接硬编码渲染About组件，路由切换时页面内容不会自动更新。需要引入Routes和Route组件，为每个路径匹配对应的页面组件，让路由系统可以根据当前URL自动渲染对应的内容。

通用排查逻辑：遇到这类React上下文依赖类报错，第一时间确认对应组件的外层是否被提供该上下文的根组件包裹，无需推翻现有项目结构重构。

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