javascript - 如何动态地为链接创建 ReactJs Router 并为每个链接渲染一个页面？

Question

我有一个对象数组 ( titleUrl )，其中包含来自 API 的标题和网址。我使用了一个名为 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;

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

我能够动态创建链接。

需要实现

为这些链接动态创建路由，当我们单击这些链接时，相同标题的 url(来自对象数组)应作为参数传递给 pagerender并使用这个参数 pagerender渲染页面

Answer 1

您可以拥有一组配置，然后映射它们:

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>