React新手求助：通过链接打开新页面的正确方法

为什么不推荐用原生 <a> 标签？ #

在React单页应用（SPA）里，原生<a href="/about">会触发整页刷新，破坏SPA的无刷新体验，还会重新加载所有资源，因此官方不推荐在内部路由跳转时使用。

用 Link 组件的正确步骤（解决你遇到的错误） #

从你的错误截图来看，大概率是没正确配置React Router，按以下步骤操作即可解决：

1. 安装React Router依赖
   先确保项目已安装适配web端的react-router-dom：

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

2. 在根组件中包裹路由容器
   所有使用Link的组件必须放在<BrowserRouter>（或其他Router类型）内部，比如在App.js中配置：

   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   import Home from './Home';
   import About from './About';
   
   function App() {
     return (
       <Router>
         {/* 导航区域 */}
         <nav>
           <Link to="/">首页</Link>
           <Link to="/about">关于我们</Link>
         </nav>
         {/* 路由匹配规则 */}
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
         </Routes>
       </Router>
     );
   }
   
   export default App;
   

3. 正确导入 Link 组件
   在需要使用链接的组件里，必须先导入Link：

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

   未导入就直接使用Link是新手常见的错误原因。

特殊场景的跳转方式 #

• 外部链接/需要新标签页打开：如果是跳转到外部网站，或者要在新标签页打开内部路由，可以用<a>标签，但要注意安全属性：

  {/* 外部链接 */}
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">外部网站</a>
  {/* 内部路由新标签页打开 */}
  <Link to="/about" target="_blank">新标签页打开关于页</Link>
  

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