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

Question

I have an array of objects( titleUrl ) contains titles and urls that is coming from an API. I used a custom component called MenuLink to create links on the sidebar and the links are populated using Object.keys(titleUrl).map method from the titleUrl array.

What I'm trying to achieve here is, When I click on each menu items it should redirect to a page created using pagerender component which is given as to={{ pathname: "/pagerender"} in the example

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;

Partial Solution so far

I was able to create the links dynamically.

Need to achieve

Dynamically created routes for these links and when we click on these links, url of the same title (from the array of object) should pass as an argument to the pagerender and using this argument pagerender renders the page

Answer 1

You could have an array of configs and then map over them:

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>