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

Question

我是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和PremierLeague.js，链接后面的这些URL将是：

websiteName.me/Leagues/WorldCup 

websiteName.me/Leagues/PremierLeague

问题：

而不是为每个联赛创建一个.js文件，我如何使其变得“动态”或“可重用”，这样我只需要一个Leagueproperty.js文件即可将道具/信息传递给它。

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

如果有办法做到这一点，我又如何保持URL相同？

非常感谢！！

Answer 1

[在每个实例中都使用React Router的方式相同，您可以简单地将leagues路由添加为前缀。

因此，您可以创建一个JS文件，在路径path上，您会说Leagues/WorldCup和Leagues/PremierLeague。

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

希望这会有所帮助！