Reactjs 反应路线，在CoreUI上使用具有不同道具/参数的相同组件

假设我有一个名为

Component1

的React组件，它根据提供的数据进行绘图--

从“/some/folder/A”导入数据；
从“/some/folder/B”导入数据；
.
.
.
从“/some/folder/Z”导入数据；
常量组件1=（道具）=>{
var data=/*决定使用道具加载的数据将来自导航链接点击事件*/
返回（/*使用数据渲染组件*/）；
}

我有另一个文件，其中指定了到组件的所有路由：

const Component1=React.lazy（（）=>import（“./views/components/Component1”）；
路线=[
{路径：“/components”，名称：“Component1”，组件：Component1，}
//有更多的组件，但它们在这里不相关。
];

我构建的

如下：

{routes.map（（route，idx）=>{
返回（route.component&&(
()}
/>
));
})}

在我的应用程序中，我有一个导航栏，它是根据变量中指定的对象列表动态构建的。在这里，每个导航项指定我们要访问的数据--

var navDataList=[
{u标记：“CSidebarNavItem”，名称：“数据A”，至：“/components”}，
{标记：“CSidebarNavItem”，名称：“数据B”，至：“/components”}，
.
.
.
{u标记：“CSidebarNavItem”，名称：“数据Z”，至：“/components”}，
]

它们就是用这个创造出来的--

因此，我基本上是想处理

数据A

、

数据B

和

数据C

等。当用户分别单击导航链接

数据A

、

数据B

和

数据C

时，使用相同的组件

组件1

我的理解是，我已经指定了要在

navList

中作为道具处理的数据对象。但我不知道该怎么做

我如何解决这个问题

有关组件的文档如下：

---

某种程度上可行的解决方案： 在

navDataList

中，如果我指定了这些参数，我可以从

组件1

访问：

var navDataList=[
{标签：“CSidebarNavItem”，名称：“数据A”，
致：{
路径名：“/components”，
散列：“数据将是默认值”，
参数：{data:“data_A”}，
},
}, 
{标签：“CSidebarNavItem”，名称：“数据B”，
致：{
路径名：“/components”，
散列：“数据”，
参数：{data:“data_B”}，
},
}, 
...
];

然后在

组件1中识别：

const组件1=（道具）=>{
var data=data_A；//要处理的默认数据
if（props.location.params&&props.location.params.data）{
if（props.location.params.data==“data_B”）{
data=data_B；
}
}
返回（/*使用数据渲染组件*/）；
}

但它没有反应，而且存在滞后。
参数数据不会立即更新。
我将定义一个“组件”路由路径，该路径将数据作为路由参数，并在
组件1
中访问

路由-使用路由参数定义路径
“/components/：data”

链接-使用指定的数据链接到特定路径

var navDataList = [
  { _tag: "CSidebarNavItem", name: "Data A", to: "/components/A" },
  { _tag: "CSidebarNavItem", name: "Data B", to: "/components/B" },
  .
  .
  .
  { _tag: "CSidebarNavItem", name: "Data Z", to: "/components/Z" },
];

通过或react hook访问参数

const Component1 = props => {
  const { data } = props.match.params;
  ...
}

或

太好了，非常感谢你！我有几个问题：1。
route
中的
path:
是否必须与目录结构匹配？2.我应该在
/components
路径中创建一个名为
：data
的目录吗？3.在
navDataList
中，如果是
/components/A
，我是否需要在
/components
中创建一个名为
A
的目录，并将
数据保存在那里？我还没有反应。@ramgorur对于（1）和（2）我不太确定我是否遵循了这个关于目录结构的问题，路径是浏览器地址栏中的内容，因此任何底层文件/目录结构都是无关的，它不需要匹配路由器中的任何内容。在“/components/：data”中，
：data
是url中实际内容的占位符。对于第（3）项，我只是假设保留您导入的
数据A
，
数据B
，等等。。在
Component1
中也是如此，我们使用映射查找或
switch
语句来获取正确的数据对象。
const Component1 = props => {
  const { data } = props.match.params;
  ...
}

import { useParams } from 'react-router-dom';

const Component1 = props => {
  const { data } = useParams();
  ...
}