Javascript 使用react路由器，如何使用路由配置传递组件道具？

我尝试使用一个路由器配置阵列来实现以下功能。这里需要注意的是，我有一个状态变量，

storeName

，我将它传递给

CategoryPage

组件

import React，{useState}来自“React”
从“react router dom”导入{Switch，Route，BrowserRouter}
从“./Navigation”导入{Navigation}
从“./HomePage”导入{HomePage}
从“/CategoryPage”导入{CategoryPage}
从“/ProductPage”导入{ProductPage}
从“/404Page”导入{PageNotFoundPage}
导出函数App（）{
const[storeName，setStoreName]=useState（'My Store'）
返回(
{storeName}
)
}

如果我要切换到使用路由配置对象，就像这样

const routeConfig=[
{
路径：“/”，
确切地说：是的，
组成部分：主页，
},
{
路径：'/category'，
准确：错，
组成部分：类别页，
},
// ...
]
// ...
{routeConfig.map（（路由，i）=>{
返回(
)
})}

…记住每个组件可能需要不同的道具，传递道具的最合适方式是什么

我想我可以尝试使route config items的

组件

键成为一个函数，该函数接受每个道具，然后尝试将其映射到要返回的组件。我不确定这是不是正确的方法

谢谢

---

更新#1

因此，我尝试从route config数组返回组件，如下所示：

const routeConfig=[
{
路径：“/”，
确切地说：是的，
组件：（道具）=>，
},
{
路径：'/category'，
准确：错，
组件：（道具）=>{
返回
},
},
]
// ...
const[storeName，setStoreName]=useState（'My Store'）
// ...
{routeConfig.map（（路由，i）=>{
返回(
{route.component（{storeName}）}
)
})}

这是可行的，但现在每个组件都有每个道具。就像在本例中一样，我的主页组件不需要

storeName

道具，但它仍然有它。一旦我开始添加其他需要其他状态变量的组件，这可能会导致大量变量存储在内存中？这似乎并不理想

---

更新#2

使用route configs可能会走错方向。看起来这实际上与react router的哲学相反，因为我从这里理解它。也许我会坚持我的第一个实现，不使用路由配置，但如果知道如何使用路由配置并传递正确的道具，那就太好了。

在你的更新中#1只提取你想要的道具

const routeConfig=[
{
路径：“/”，
确切地说：是的，
组件：（）=>，
},
{
路径：'/category'，
准确：错，
组件：（{storeName}）=>{
返回
},
},
]

---

或者，您可以使用每个组件的相关道具列表，并在移动中提取它们

函数pickProps（availableProps={}，selection=[]）{
返回选择.reduce(
（道具，selectedProperty）=>{
道具[selectedProperty]=可用的道具[selectedProperty]；
返回道具；
},
{}
);
}
// ...
常数routeConfig=[{
路径：“/”，
确切地说：是的，
组成部分：主页，
},
{
路径：'/category'，
准确：错，
组成部分：类别页，
道具：['storeName']，
},
// ...
]
// ...
常量componentProps={storeName}
//....
{routeConfig.map（（路由，i）=>{
返回(
)
})}

将

道具

对象添加到配置对象中，并创建

？谢谢，这很有效。我能想到的唯一限制是，如果两个组件具有相同的命名属性，并且如果我想传递它们不同的值，则可能会发生冲突。@Talha确实如此，但您在所有备选方案中都会遇到这个问题。