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

我使用Bootstrap4和ReactJs构建了下面的菜单组件

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

如果我有10个菜单项，那么如何构建一个组件 我把它隔开

目前看来

从“React”导入React；
从“react router dom”导入{Link}；
常数MENUDATA=[
{menuLink:“/”，menuLabel:“Home”}，
{menuLink:“/products”，menuLabel:“products”}，
{menuLink:“/test”，menuLabel:“404”}，
{menuLink:“/login”，menuLabel:“login”}
];
功能菜单（道具）{
返回(
{

{MENUDATA.map（m=>{
如果（m.menuLabel==“登录”）{
返回(

{m.menuLabel}

);
}否则{
返回(

{m.menuLabel}

);
}
})}

}
);
}
导出默认菜单；
可以考虑使用CSS代码> Flex  >属性可以考虑使用CSS <代码> Flex < /Cl>属性
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;