使用 React 为同一对象的多个实例动态创建网页答案

【问题标题】：Dynamically create a webpage using React for many instances of the same object使用 React 为同一对象的多个实例动态创建网页
【发布时间】：2020-03-30 16:27:33
【问题描述】：

我是 React 和 Web 开发的新手，但我想知道是否有一种方法可以“动态地”创建网页。例如：

我有一个足球联赛的 .json 文件，如下所示：

"api": {
    "results": 1376,
    "leagues": [
        {
            "league_id": 1,
            "name": "World Cup",
        },

        {
            "league_id": 2,
            "name": "Premier League",
        },

        ....

我有另一个名为 Leagues.js 的 .js 文件，它呈现 .json 中的所有足球联赛以及相应的蓝色链接：网址如下所示：

websiteName.me/Leagues

目前，这些蓝色链接中的每一个都使用 react-router 路由到单独的 .js 文件。这些 .js 中的每一个都呈现与该特定联赛对应的网页。所以我有一个 WorldCup.js 和一个 PremierLeague.js，链接后面的这些 URL 将是：

websiteName.me/Leagues/WorldCup 

websiteName.me/Leagues/PremierLeague

问题：

不是为每个单独的联赛都有一个 .js 文件，而是如何让它“动态”或更确切地说“可重用”，这样我只需要一个 LeagueInstance.js 文件来呈现传递给它的道具/信息。

我这样做的动机是因为有 1300 个联赛，我希望所有页面看起来都一样，只是显示 .json 文件中不同联赛对象的不同信息。有没有办法做到这一点或更好的建议？

如果有办法做到这一点，我将如何保持 URL 不变？

非常感谢！！！

【问题讨论】：

使用忽略 URL 模式并将所有流量路由到一个 React 应用程序的服务器，然后在该应用程序中获取该联赛的数据并显示它。换句话说，你需要使用 React，可能还需要使用 react-router-dom。这是 router-dom 库reacttraining.com/react-router/web/example/basic 的链接，尽管我感觉您需要先掌握一些更基本的反应。

标签： javascript html reactjs url dynamic

【解决方案1】：

就像你在每个实例中使用 react 路由器一样，你可以简单地添加 leagues 路由作为前缀。

所以，你可以创建一个单独的 JS 文件，在你的路由 path 上，你会说 Leagues/WorldCup 和 Leagues/PremierLeague。

这将需要您整合代码，因此根据每个代码的数量，这可能会很困难。

希望这会有所帮助！

【讨论】：