Javascript reactjs-通过json动态呈现组件路由

我是一个新的反应和一般在javascript

此外，我确实有一个json文件，我想获取url值并用该名称呈现一个组件

{
  "MTs": {
    "MenuItems": {
      "Main": {
        "key": "1",
        "url": "about",
        "visible": true
      },
      "Add Status": {
        "key": "2",
        "url": "topics",
        "visible": true
      },
   }
}

我的代码：

  const [data, setData] = useState({ MTs: [] });

  useEffect(() => {
    fetch(props.role + ".json")
      .then(function (response) {
        // console.log(response);
        return response.json();
      })
      .then(function (myJson) {
        // console.log(myJson);
        setData(myJson);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);


  var url = [];
  var val = function (data) {
    for (var key in data) {
      if (data.hasOwnProperty(key)) {
        for (var title in data[key].MenuItems) {
          if (data[key].MenuItems[title].visible == true) {
            url.push(
            <Route
              path={"/"+ data[key].MenuItems[title].url}
              component={data[key].MenuItems[title].url}
            />
            );
          }
        }
      }
    }
    return url;
  };
  return <div>{val(data)}</div>;
};

const[data，setData]=useState（{MTs:[]}）；
useffect（（）=>{
获取（props.role+“.json”）
.然后（功能（响应）{
//控制台日志（响应）；
返回response.json（）；
})
.then（函数（myJson）{
//log（myJson）；
setData（myJson）；
})
.catch（（错误）=>{
控制台日志（err）；
});
}, []);
var url=[]；
var val=函数（数据）{
for（var输入数据）{
if（data.hasOwnProperty（key））{
对于（数据[key].MenuItems中的变量标题）{
if（数据[key].MenuItems[title].visible==true）{
url.push(
);
}
}
}
}
返回url；
};
返回{val（data）}；
};

它不会呈现，因为它是一个数组，并在组件名称中添加了双引号“”

有什么办法或“更好的办法”可以做到这一点吗

预期结果

<Route
  path="/about"
  component={about}
/>
<Route
  path="/topics"
  component={topics}
/>
<Route path="/datagrid" component={etc} /> 

---

尝试将组件添加到如下对象中

const组件={
“关于”：，
“主题”：
}

Hi Sam，问题是我无法更改json文件。我需要以某种方式从“url”中自动获取该字符串，并将其转换为对象，我猜？首先，您不需要更改json。您需要将所有动态组件添加到单独的对象（如组件变量）中。当你循环时，你可以使用组件对象根据你传递的URL调用组件。嗨，山姆。我想这是我应该做的。但我没有足够的经验（对ReactJS来说是新手）将组件添加到json文件中的一个单独对象中并循环使用它们。对代码有什么建议吗？