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

我不熟悉React和web开发，但我想知道是否有一种方法可以“动态”创建网页。例如：

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

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

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

        ....

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

websiteName.me/Leagues

目前，这些蓝色链接中的每一个都使用react router路由到单独的.js文件。这些.js中的每一个都会呈现一个对应于特定联盟的网页。因此，我有一个WorldCup.js和一个premireleague.js，这些链接下面的URL是：

websiteName.me/Leagues/WorldCup 

websiteName.me/Leagues/PremierLeague

问题：

我怎样才能使每个联赛都有一个.js文件，而不是每个联赛都有一个.js文件，让它“动态”或者“可重用”，这样我就只需要一个LeagueInstance.js文件来呈现传递给它的道具/信息

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

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

---

非常感谢

与在每个实例中使用react router的方式相同，您只需添加

leagues

路由作为前缀

因此，您可以创建一个JS文件，在路径

上，您可以说
Leagues/WorldCup
和
Leagues/PremierLeague

这将需要您合并代码，因此根据每个代码中的代码量，这可能很困难

希望这有帮助
 使用忽略URL模式并将所有流量路由到一个React应用程序的服务器，然后在该应用程序中获取该联盟的数据并显示它。换句话说，您需要使用React，可能还需要使用
React路由器dom
。这里有一个到路由器dom库的链接，尽管我觉得您需要先掌握一些更基本的知识。