Javascript 如何将标题菜单项重新路由到URL，而不是React/Gatsby中的内部文件？

我正在修改react Gatsby模板，不知道如何重新路由标题菜单项以链接到外部URL，同时保持其余菜单项不变。头文件包含以下嵌套文件：

Header.js

Index.js

menuItems.js

import React from "react";
import { menuItems } from "./menuItems";
import { Link } from "gatsby";
export default function Header() {
  return (
    <div>
      {menuItems.map((menuItem) => (
        <li className="nav-item" key={menuItem.name}>
          {menuItem.isExternal ? (
            <a
              className="nav-link"
              href={`${menuItem.name}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {menuItem.label}
            </a>
          ) : (
            <Link
              className="nav-link"
              to={`/${menuItem.name}`}
              role="button"
              aria-expanded="false"
            >
              {menuItem.label}
            </Link>
          )}
        </li>
      ))}
    </div>
  );
}

export const menuItems = [
  {
    name: "product",
    label: "Product",
    isExternal: false,
  },
  {
    name: "solutions",
    label: "Solutions",
    isExternal: false,
  },
  {
    name: "company",
    label: "Company",
    isExternal: false,
  },
  {
    name: "support",
    label: "Support",
    isExternal: false,
  },
  {
    name: "sign-in",
    label: "Sign In",
    isExternal: true,
  },
];

行为在

Header.js

文件中受如下控制：

import { menuItems } from "./menuItems";

<Menu
  className="navbar-nav d-none d-lg-flex"
  dark={isDark ? 1 : 0}
>
  {menuItems.map(
    (
      { label, isExternal = false, name, items, ...rest },
      index
    ) => {
      const hasSubItems = Array.isArray(items);
      return (
        <React.Fragment key={name + index}>
          {hasSubItems ? (
            <li className="nav-item dropdown" {...rest}>
              <a
                className="nav-link dropdown-toggle"
                role="button"
                data-toggle="dropdown"
                aria-expanded="false"
                href="/#"
                onClick={(e) => e.preventDefault()}
              >
                {label}
              </a>
              <MenuDropdown
                className="menu-dropdown dropdown-right"
                dark={isDark ? 1 : 0}
              >
                {items.map((subItem, indexSub) => {
                  const hasInnerSubItems = Array.isArray(
                    subItem.items
                  );
                  return (
                    <React.Fragment
                      key={subItem.name + indexSub}
                    >
                      {hasInnerSubItems ? (
                        <li className="drop-menu-item dropdown">
                          <a
                            className="dropdown-toggle"
                            role="button"
                            data-toggle="dropdown"
                            aria-expanded="false"
                            href="/#"
                            onClick={(e) => e.preventDefault()}
                          >
                            {subItem.label}
                          </a>
                          <MenuDropdown
                            className="menu-dropdown dropdown-right"
                            dark={isDark ? 1 : 0}
                          >
                            {subItem.items.map(
                              (itemInner, indexInnerMost) => (
                                <li
                                  className="drop-menu-item"
                                  key={
                                    itemInner.name +
                                    indexInnerMost
                                  }
                                >
                                  {itemInner.isExternal ? (
                                    <a
                                      href={`${itemInner.name}`}
                                      target="_blank"
                                      rel="noopener noreferrer"
                                    >
                                      {itemInner.label}
                                    </a>
                                  ) : (
                                    <Link
                                      to={`/${itemInner.name}`}
                                    >
                                      {itemInner.label}
                                    </Link>
                                  )}
                                </li>
                              )
                            )}
                          </MenuDropdown>
                        </li>
                      ) : (
                        <li className="drop-menu-item">
                          {subItem.isExternal ? (
                            <a
                              href={`${subItem.name}`}
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              {subItem.label}
                            </a>
                          ) : (
                            <Link to={`/${subItem.name}`}>
                              {subItem.label}
                            </Link>
                          )}
                        </li>
                      )}
                    </React.Fragment>
                  );
                })}
              </MenuDropdown>
            </li>
          ) : (
            <li className="nav-item" {...rest}>
              {isExternal ? (
                <a
                  className="nav-link"
                  href={`${name}`}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {label}
                </a>
              ) : (
                <Link
                  className="nav-link"
                  to={`/${name}`}
                  role="button"
                  aria-expanded="false"
                >
                  {label}
                </Link>
              )}
            </li>
          )}
        </React.Fragment>
      );
    }
  )}
</Menu>

export const menuItems = [
  {
    name: "product",
    label: "Product",
  },
  {
    name: "solutions",
    label: "Solutions",
  },
  {
    name: "company",
    label: "Company",
  },
  {
    name: "support",
    label: "Support",
  },
  {
    name: "sign-in",
    label: "Sign In",
  },
];

我想让

name:“登录”

路由到外部https URL，但我希望其余的保持不变（这意味着它们只是链接到一个页面…

support.js

）

我不知道该怎么做

有几次我似乎很接近，但是

react

在URL前面插入了一个前导

/

非常感谢您的帮助！！

Header.js

import React from "react";
import { menuItems } from "./menuItems";
import { Link } from "gatsby";
export default function Header() {
  return (
    <div>
      {menuItems.map((menuItem) => (
        <li className="nav-item" key={menuItem.name}>
          {menuItem.isExternal ? (
            <a
              className="nav-link"
              href={`${menuItem.name}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {menuItem.label}
            </a>
          ) : (
            <Link
              className="nav-link"
              to={`/${menuItem.name}`}
              role="button"
              aria-expanded="false"
            >
              {menuItem.label}
            </Link>
          )}
        </li>
      ))}
    </div>
  );
}

export const menuItems = [
  {
    name: "product",
    label: "Product",
    isExternal: false,
  },
  {
    name: "solutions",
    label: "Solutions",
    isExternal: false,
  },
  {
    name: "company",
    label: "Company",
    isExternal: false,
  },
  {
    name: "support",
    label: "Support",
    isExternal: false,
  },
  {
    name: "sign-in",
    label: "Sign In",
    isExternal: true,
  },
];

---

你必须稍微修改

菜单项

数组，添加

isExternal:true或false

。然后你可以循环这个数组在

Header.js

中创建你的动态链接到底是什么问题？如果你可以在中显示示例代码，那太好了。谢谢！！我应该在哪里插入

登录的URL指向
菜单项中的？示例
{name:https://www.google.co.in/，标签：“登录”，isExternal:true，}
很酷，很有意义。虽然我现在看到我应该提供
Header.js
的完整代码。我将在上面修改它。任何更新的建议都会令人惊讶！查看更新后的Header.js文件会更复杂（我相信也有一些问题）。我或stack overflow中的任何人都不可能在没有明确问题/问题的情况下回答。如果您可以将您的项目上载到codesandbox.io并与他人共享，我将很乐意看一看。感谢您花费时间。我将让我的团队成员看一看。我自己也在尝试了解这一点以提高技能。如果需要，我会联系您。谢谢又来了！！！