ReactJS CoreUI - 如何在侧边栏项目中使用 URL 路径参数

如何解决ReactJS CoreUI - 如何在侧边栏项目中使用 URL 路径参数

我是使用 React JS 和 Core UI 模板开发应用程序的新手。

我想为每个页面制作 2 个不同的页面和不同的侧边栏。

• 第 1 页：数据
• 侧边栏菜单：数据

在数据页面布局中，数据库中的数据将显示在一个数据表中，每行都有一个“工件”按钮。每次点击按钮都会推送到页面Artifact

history.push(`/datas/${idData}/artifacts/}`

• 第 2 页：神器
• 侧边栏菜单：数据、工件

我正在使用带有 _navArtifact.js 的 Core UI 模板来在显示 Artifact 页面时存储边栏项目。

这是_navArtifact.js 从“反应”导入反应

const _navArtifact =  [
  {
    _tag: 'CSidebarNavItem',name: 'Datas',to: '/datas'
  },{
    _tag: 'CSidebarNavItem',name: 'Artifact',to: '/datas/:id/artifact'
  }
]

export default _navArtifact

这是为侧边栏项目创建组件的 ArtifactSidebar.js

import navigation from './_navArtifact'

const ArtifactSidebar = () => {

  const dispatch = usedispatch()   
  
  return (
    <CSidebar
      show={show}
      onShowChange={(val) => dispatch({type: 'set',sidebarShow: val })} >
      
      <CSidebarNav>
        <CCreateElement
          items={navigation}
          components={{
            CSidebarNavDivider,CSidebarNavDropdown,CSidebarNavItem,CSidebarNavTitle
          }}
        />
      </CSidebarNav>
    </CSidebar>
  )
}

export default React.memo(ArtifactSidebar)

现在我的问题是侧边栏项目“Artifact”是指向“/datas/:id/artifact”的链接。 如何在_navArtifact.js 中使用param :id？

当前网址：localhost:3000/#/datas/123456/artifact/datas/:id/artifact

预期：localhost:3000/#/datas/123456/artifact

任何建议将不胜感激。提前致谢。