如何在React的NavLinks组件中添加外部Web URL

问题描述 #

我使用React搭建了一个网站，现在希望在自定义的NavLinks组件中添加外部Web URL。相关代码如下，我已将想要添加的URL部分以注释形式标出：

<Nav scrollNav = {scrollNav}>
        <NavbarContainer>
            <NavLogo onClick={toggleHome}>Grama-Check </NavLogo>
            <MobileIcon onClick={toggle}>
              <FaBars/>
            </MobileIcon >
            
               <NavMenu>
              <NavItem> 
                <NavLinks to='about' smooth={true} duration={500} spy={true} exact = 'true' offset={-80}>About</NavLinks>
              </NavItem>
              <NavItem>
                <NavLinks to='services'  smooth={true} duration={500} spy={true} exact = 'true' offset={-80}>Services</NavLinks>
              </NavItem>
              <NavItem>
                <NavLinks to='apply'  smooth={true} duration={500} spy={true} exact = 'true' offset={-80}>Apply</NavLinks>
              </NavItem>  
              {/* <NavItem>
              
                <a href= 'https://gramachecksupport.slack.com'>Help</a>
              </NavItem>    */}

              
              
            </NavMenu>

解决方案 #

方案一：修改自定义NavLinks组件，支持外部链接 #

如果希望保持导航项样式和交互的一致性，可以扩展NavLinks组件，让它自动识别外部URL并渲染原生<a>标签：

import React from 'react';
// 假设你的NavLinks基于react-scroll的Link组件实现
import { Link } from 'react-scroll';

const NavLinks = ({ to, children, ...props }) => {
  // 判断是否为外部URL
  const isExternal = to.startsWith('http://') || to.startsWith('https://');

  if (isExternal) {
    return (
      <a
        href={to}
        target="_blank"
        rel="noopener noreferrer"
        // 应用和NavLinks相同的样式类名，确保视觉一致
        className="nav-links"
      >
        {children}
      </a>
    );
  }

  // 内部链接继续使用原有逻辑
  return (
    <Link
      to={to}
      {...props}
      className="nav-links"
    >
      {children}
    </Link>
  );
};

export default NavLinks;

修改后，直接在导航中使用外部URL即可：

<NavItem>
  <NavLinks to='https://gramachecksupport.slack.com'>Help</NavLinks>
</NavItem>

方案二：使用原生<a>标签并匹配样式 #

如果不想修改NavLinks组件，直接使用原生<a>标签并添加和NavLinks相同的CSS类，就能保证样式一致：

<NavItem>
  <a
    href='https://gramachecksupport.slack.com'
    target="_blank"
    rel="noopener noreferrer"
    className="nav-links" // 替换为你的NavLinks实际使用的类名
  >
    Help
  </a>
</NavItem>

注意：添加target="_blank"和rel="noopener noreferrer"是外部链接的安全最佳实践，可防止潜在的安全漏洞。

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