如何使用react-router实现拆分视图界面？

Question

我想构建拆分视图功能，以便用户可以并排查看多个组件。

在我的应用程序的单个视图中，react-router URL设置如下：

• /用户/：ID
• /聊天/：ID
• 的/ etc /：ID

如何实现react-router以使用拆分视图？

有许多不同的接口，我希望用户能够以任何顺序呈现任何接口组合。

我正在考虑创建一个具有childrenComponents prop的SplitView组件，该组件需要呈现一组组件。我可以设置反应路由器URL，如：

• /拆分/

然后将查询字符串添加到结尾

• 视图=％5B％7B％22component％22：％22chat％22％22id％22：％22123％22％7D，％7B％22component％22：％22chat％22％22id％22：％ 22456％22％7D％5D

这是一个经过编码的字符串化JSON对象数组

[
    {
        component:'chat',
        id:'foo'
    },
    {
        component:'chat',
        id:'bar'
    }
]

这不是最好的方法，有没有人有任何建议？

更新

在尝试了几种不同的方法之后，我发现没有react-router就可以更轻松地管理多路径，而只需使用redux和经过深思熟虑的状态树。

然而，在我搜索期间，我找到了一些很酷的库，可以帮助那些有类似问题的其他人：

• react-tiles
• react-mosaic

Answer 1

我认为你的方法可以稍作修改。

在您的路线/split/*中声明，它最终会显示为/split/user/1/basket/2/item/3。

然后使用此函数获取组件列表：

pathArray = path.split('/').filter(s => (s !=== ''))
path = _.chunk(pathArray, 2) // note lodash usage here

你现在有[['user', '1'], ['basket', '2'], ['item', '3']]。如果页面上的组件顺序无关紧要，您可以使用lodash的fromPairs来获取对象。

在拆分组件中使用类似react-loadable的内容，以防止在一个块中加载所有组件。

这个想法