如何使用 menuItems/dropdownMenu 导航栏重定向到外部 link

Question

我想做的是重定向到外部 link 而不是我网站上的现有页面。

这是菜单项的代码：

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;

Answer 1

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

字符串：Link 位置的字符串表示，通过连接位置的路径名、搜索和哈希属性创建。对象：可以具有以下任何属性的对象： pathname：表示link到的路径的字符串。搜索：查询参数的字符串表示。散列：要放入 URL 的散列，例如#a-哈希。状态：状态持续到该位置。函数：将当前位置作为参数传递给的函数，并且应该 return 将位置表示为字符串或对象

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

如何使用 menuItems/dropdownMenu 导航栏重定向到外部 link

how to redirect to an external link with menuItems/dropdownMenu navbar

navbar

reactjs