Javascript React Route-从JSON对象中的字符串呈现路由中的组件

我正试图将React组件与我创建的JSON文件中的组件名称进行比较。例如，我想在路由的组件内呈现TestSection组件

这是使用“react router dom”提供的路由组件

下面是一个我试图创建动态路线的例子，我完全不明白为什么这样做行不通：

（DynamicNavigaitonSwitcher.js）

从“react router dom”导入{BrowserRouter as Route，Switch}；
导航=[
[“Explore”、“/”、“Explore”、false]，
[“Profile”、“/Profile/”、“TestSection”，false]，
[“Messages”、“/Messages/”、“TestSection”，false]，
[“Listings”、“/Listings/”、“TestSection”，false]，
[“设置”、“/Settings/”、“TestSection”，false]，
[“Login”、“/Login/”、“TestSection”，false]，
[“注册”、“/signup/”、“TestSection”，false]
]
const Explore=（）=>{
返回(
勘探
)
}
常量TestSection=（）=>{
返回(
哎

)
}
常数分量={
testsection:testsection，
探索：探索
};
常量DynamicRoutes=navigation.map（（navItem）=>{
返回(
)
}
);
常量动态导航开关=（）=>{
返回(
{炸药}
)
}
导出默认动态导航开关存在一些语法错误：


你应该创建一个类似的组件并返回导航地图
组件：按键错误，与导航项位置2不同
BrowserRouter您应该在index.js中放置并包装//如果您有它，请在代码中按div更改BrowserRouter，然后单击ok
将其路由到元素以创建路由

测试此代码，我更正了以前的错误，它对我有效：

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch}；
常量导航=[
[“Explore”、“/”、“Explore”、false]，
[“Profile”、“/Profile/”、“testsection”，false]，
[“Messages”、“/Messages/”、“testsection”，false]，
[“Listings”、“/Listings/”、“testsection”，false]，
[“设置”、“/Settings/”、“testsection”，false]，
[“Login”、“/Login/”、“testsection”，false]，
[“注册”、“/signup/”、“testsection”，false]
];
const Explore=（）=>{
返回(
勘探
);
};
常量TestSection=（）=>{
返回嘿
；
};
常数分量={
testsection:testsection，
探索：探索
};
常量炸药=（）=>{
返回navigation.map（navItem=>{
返回(
);
});
};
常量动态导航开关=（）=>{
返回(
);
};
导出默认动态导航开关；
Ahhh非常感谢您，我对React JS不太熟悉，并且一直在尝试为React路由器提供最佳实践。我很抱歉这个措词不当的问题，但这是一个很好的答案，谢谢：）