reactjs - 如何为 ReactJs 和 Bootstrap 4 中的菜单项动态分配相等的空间

Question

我在下面使用 bootstrap 4 和 ReactJs 构建了菜单组件

我有四个菜单项 1) 主页 2) 产品 3) 404 4) 登录

如何构建一个组件，如果我明天有 10 个菜单项，那么我将如何平均分配它

目前看来

import React from "react";
import { Link } from "react-router-dom";

const MENUDATA = [
  { menuLink: "/", menuLabel: "Home" },
  { menuLink: "/products", menuLabel: "Products" },
  { menuLink: "/test", menuLabel: "404" },
  { menuLink: "/login", menuLabel: "Login" }
];

function Menu(props) {
  return (
    <nav class="navbar bg-faded">
      {
        <div class="container">
          <ul class="navbar-nav nav-fill w-100">
            {MENUDATA.map(m => {
              if (m.menuLabel == "Login") {
                return (
                  <li class="nav-item active pull-right" key={m.menuLabel}>
                    <Link class="nav-link" to={m.menuLink}>
                      <i class="fa fa-fw fa-user"></i>
                      {m.menuLabel}
                    </Link>
                  </li>
                );
              } else {
                return (
                  <li class="nav-item active" key={m.menuLabel}>
                    <Link class="nav-link" to={m.menuLink}>
                      {m.menuLabel}
                    </Link>
                  </li>
                );
              }
            })}
          </ul>
        </div>
      }
    </nav>
  );
}

export default Menu;