React项目部署到Firebase后外部链接无法正常跳转问题

算力阿峰

2026-5-27

问题解决：外部链接部署后变为应用内重载

我一眼就发现问题出在你的Blog链接的href属性上！你写的是href="https:juniorlearnstocode.blogspot.ba"，这里少了两个斜杠，正确的完整URL格式应该是href="https://juniorlearnstocode.blogspot.ba"。

为什么会出现这个异常？

在开发环境中，浏览器可能会自动补全这类小疏漏，但部署到Firebase这类生产环境后，浏览器会把不完整的URL解析成相对路径——它会把juniorlearnstocode.blogspot.ba当成当前域名下的子路径，于是就出现了https://mirza-sisic.firebaseapp.com/juniorlearnstocode.blogspot.ba这样的错误地址，最终导致应用重载而不是跳转到外部博客页面。

import React from 'react'; 
import Logo from '../../../src/Images/MirzaLogo.png'; 
import { Navbar, Nav, NavItem } from 'react-bootstrap'; 

const Menu = () => ( 
  <Navbar inverse fixedTop collapseOnSelect> 
    <Navbar.Header> 
      <Navbar.Brand> 
        <a href="#headerwrap"><img alt="MS logo" src={Logo}/></a> 
      </Navbar.Brand> 
      <Navbar.Toggle /> 
    </Navbar.Header> 
    <Navbar.Collapse> 
      <Nav pullRight> 
        <NavItem eventKey={1} href="#aboutwrap"> About </NavItem> 
        <NavItem eventKey={1} href="#Resume"> Resume </NavItem> 
        <NavItem eventKey={2} href="#workwrap"> Projects </NavItem> 
        <NavItem eventKey={2} href="#Clients"> Clients </NavItem> 
        <NavItem eventKey={2} href="#Contact"> Contact </NavItem> 
        {/* 修正了URL的协议头格式 */}
        <NavItem target="_blank" rel="noopener noreferrer" eventKey={2} href="https://juniorlearnstocode.blogspot.ba"> Blog </NavItem> 
      </Nav> 
    </Navbar.Collapse> 
  </Navbar> 
); 

export default Menu;

额外小提示

对于外部链接，一定要确保URL包含完整的协议头（http://或https://），这样浏览器才能正确识别为外部地址，而非当前应用的相对路径。
你已经给外部链接加上了target="_blank"和rel="noopener noreferrer"，这是非常规范的做法，能避免潜在的安全风险，继续保持！

外部链接问题截图