Javascript 如何为链接动态创建ReactJs路由器并为每个链接呈现页面？

我有一个对象数组（

titleUrl

）包含来自API的标题和URL。我使用一个名为

MenuLink

的自定义组件在侧栏上创建链接，并使用

Object.keys（titleUrl.map）从
titleUrl
数组中填充链接

这里我试图实现的是，当我单击每个菜单项时，它应该重定向到一个使用
pagerender
组件创建的页面，该组件在示例中作为
to={{{pathname://pagerender}

import React from 'react';
import { Link } from "react-router-dom";
import { MenuLink } from "../components/MenuLink";

class CreateLinks extends React.Component{
    render(){
        var titleUrl= [
            {"title1":"url1"},
            {"title2":"url2"},
            {"title3":"url3"},
            ...
            ...
        ];
        return(
            <React.Fragment>
                { 
                    Object.keys(titleUrl).map((item, i) => (
                        <MenuLink key={item} element={Link} to={{ pathname: "/pagerender"} >{ titleUrl[item].title }</MenuLink>
                    ))
                }   
            </React.Fragment>
        )
    }
}

export default CreateLinks;

从“React”导入React；
从“react router dom”导入{Link}；
从“./components/MenuLink”导入{MenuLink}；
类CreateLinks扩展了React.Component{
render（）{
变量titleUrl=[
{“标题1”：“url1”}，
{“标题2”：“url2”}，
{“标题3”：“url3”}，
...
...
];
返回(
{ 
Object.keys（titleUrl）.map（（项，i）=>(
{titleUrl[item].title}
))
}   
)
}
}
导出默认创建链接；

到目前为止的部分解决方案

我能够动态地创建链接

需要实现

为这些链接动态创建路由，当我们单击这些链接时，相同标题的url（来自对象数组）应作为参数传递给
pagerender
，并使用此参数
pagerender
呈现页面
您可以拥有一个配置数组，然后映射到它们：

const links = [
  { label: Link1, value: "/link1" },
  { label: Link2, value: "/link2" }
]

const routes = [
  {
    path: "/link1",
    component: Link1
  },
  {
    path: "/link2",
    component: Link2
  }
]

// In render

<Container>
  <Nav>
    {links.map(link => {
      return (
        <MenuLink
          key={link.url}
          element={Link}
          to={{ pathname: link.url }}
        >
          {link.label}>
        </MenuLink>
      );
    })}
  </Nav>
  {routes.map((route) => {
    return (
      <Route
        key={route.path}
        path={route.path}
        exact={route.exact}
        component={route.component}
      />
    );
  })}
</Container>

const链接=[
{label:Link1，值：“/Link1”}，
{标签：Link2，值：“/Link2”}
]
常数路由=[
{
路径：“/link1”，
组件：Link1
},
{
路径：“/link2”，
组件：Link2
}
]
//渲染中
{links.map（link=>{
返回(
{link.label}>
);
})}
{routes.map（（route）=>{
返回(
);
})}
您可以拥有一组配置，然后映射到这些配置上：

const links = [
  { label: Link1, value: "/link1" },
  { label: Link2, value: "/link2" }
]

const routes = [
  {
    path: "/link1",
    component: Link1
  },
  {
    path: "/link2",
    component: Link2
  }
]

// In render

<Container>
  <Nav>
    {links.map(link => {
      return (
        <MenuLink
          key={link.url}
          element={Link}
          to={{ pathname: link.url }}
        >
          {link.label}>
        </MenuLink>
      );
    })}
  </Nav>
  {routes.map((route) => {
    return (
      <Route
        key={route.path}
        path={route.path}
        exact={route.exact}
        component={route.component}
      />
    );
  })}
</Container>

const链接=[
{label:Link1，值：“/Link1”}，
{标签：Link2，值：“/Link2”}
]
常数路由=[
{
路径：“/link1”，
组件：Link1
},
{
路径：“/link2”，
组件：Link2
}
]
//渲染中
{links.map（link=>{
返回(
{link.label}>
);
})}
{routes.map（（route）=>{
返回(
);
})}
您需要定义哪个URL对应于哪个组件。然后您可以创建动态菜单，将特定标题映射到URL（该菜单应有效，并使用Route映射到特定组件）.hi Zhuber我在这里尝试仅使用一个组件呈现页面，而不创建多个组件。.呈现逻辑将从url参数Passed中选择，然后仅定义。或者每个链接都有不同的查询参数，这是您的问题？谢谢@Zhuber将尝试并在此处更新您需要定义哪个url corr响应哪个组件。然后您可以创建动态菜单，将特定标题映射到URL（应该是有效的，并使用Route映射到特定组件）.hi Zhuber我在这里尝试仅使用一个组件呈现页面，而不创建多个组件。.呈现逻辑将从url参数passed中选择，然后仅定义。或者每个链接都有不同的查询参数，这是您的问题？谢谢@Zhuber将尝试此操作，并将在返回路径中在此更新={route.path}不起作用..此处也创建了链接，但下一部分不起作用返回路径={route.path}不起作用..此处也创建了链接，但下一部分不起作用