如何使用 menuItems/dropdownMenu 导航栏重定向到外部链接答案

【问题标题】：how to redirect to an external link with menuItems/dropdownMenu navbar如何使用 menuItems/dropdownMenu 导航栏重定向到外部链接
【发布时间】：2022-01-11 17:27:43
【问题描述】：

我要做的是重定向到外部链接，而不是我网站上的现有页面。

这里是菜单项的代码：

export const MenuItems = [
  {
    title: 'Marketing',
    path: '/marketing',
    cName: 'dropdown-link'
  },
  {
    title: 'Consulting',
    href: '/consulting',
    cName: 'dropdown-link'
  },
];

这是下拉菜单的代码：

  const [click, setClick] = useState(false);

  const handleClick = () => setClick(!click);

  return (
    <>
      <ul
        onClick={handleClick}
        className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}
      >
        {MenuItems.map((item, index) => {
          return (
            <li key={index}>
              <Link
                className={item.cName}
                to={item.path}
                onClick={() => setClick(false)}
              >
                {item.title}
              </Link>
            </li>
          );
        })}
      </ul>
    </>
  );
}

export default Dropdown;

【问题讨论】：

标签： reactjs navbar

【解决方案1】：

Have a look here 使用 react-router 的 Link 组件，您可以做到这一点。在“to”属性中，您可以指定 3 种类型的数据：

字符串：链接位置的字符串表示形式，通过连接位置的路径名、搜索和哈希属性创建。对象：可以具有以下任何属性的对象：路径名：表示要链接到的路径的字符串。 search：查询参数的字符串表示。哈希：要放入 URL 的哈希，例如#a 哈希。 state：要持续到该位置的状态。函数：将当前位置作为参数传递给它的函数，它应该以字符串或对象的形式返回位置表示

&lt;Link to={{ pathname: "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }} target="_blank" /&gt;

【讨论】：