React 路由，在 CoreUI 上使用相同的组件但 props/parameters 不同

Question

假设我有一个名为 Component1 的 React 组件，它根据提供的数据绘制图表 --

import data_A from "./some/folder/A";
import data_B from "./some/folder/B";
.
.
.
import data_Z from "./some/folder/Z";

const Component1 = (props) => {
    var data = /* decide which data to load using props, will come from a nav link click event */
    return(/* render component with data */);
}

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

const Component1 = React.lazy(() => import("./views/components/Component1"));

routes = [
    { path: "/components", name: "Component1", component: Component1, }
    // there are more components but they are not relevant here.
];

我这样构建 <Switch/>：

<Switch>
    {routes.map((route, idx) => {
        return(route.component && (
            <Route key={idx} path={route.path} exact={route.exact} name={route.name}
                render={(props) => (<route.component {...props} />)}
            />
        ));
    })}
    <Redirect from="/" to="/components" />
</Switch>

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

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

它们是用这个创建的--

<CSidebarNav>
    <CCreateElement items={navDataList} components={{CSidebarNavItem}} />
</CSidebarNav>

所以我基本上想做的是在用户单击nav link Data A、Data B 和 Data C。

我的理解是我已经在 navList 中指定了我想要处理的数据对象作为道具。但我不知道该怎么做。

如何解决这个问题？

关于 CoreUI React components are here: CSidebarNavItem, CSidebarNav, CCreateElement 的文档。

有点有效的解决方案：

在navDataList里面，如果我指定这些参数，我可以从Component1:

访问

var navDataList = [
    { _tag: "CSidebarNavItem", name: "Data A", 
        to: { 
            pathname: "/components",
            hash: "data_A_will_be_default",
            params: { data: "data_A" },
        },
    }, 
    { _tag: "CSidebarNavItem", name: "Data B", 
        to: { 
            pathname: "/components",
            hash: "data_B",
            params: { data: "data_B" },
        },
    }, 
    ...
];

然后在 Component1 内识别：

const Component1 = (props) => {
    var data = data_A; // default data to process
    if (props.location.params && props.location.params.data) {
        if (props.location.params.data === "data_B") {
            data = data_B;
        }
    }
    return(/* render component with data */);
}

但是它没有响应并且有延迟。 params.data 不会立即更新。

Answer 1

我将定义一个单一的“组件”路由路径，它将数据作为路由参数并在 Component1 中访问。

路由 - 使用路由参数定义路径 "/components/:data"

routes = [
  { path: "/components/:data", name: "Component1", component: Component1, }
  // there are more components but they are not relevant here.
];

链接 - link 到具有指定数据的特定路径

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" },
];

访问match params via Route props or useParams反应挂钩

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

或

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

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

React 路由，在 CoreUI 上使用相同的组件但 props/parameters 不同

React route, use the same component with different props/parameters on CoreUI

reactjs

react-router

core-ui

有点有效的解决方案：