我想构建拆分视图功能，以便用户可以并排查看多个组件。
在我的应用程序的单个视图中，反应路由器 URL 设置如下：
/- user/：id /
- chat/：id /
- etc/：id
您将如何实现 react-router 以使用拆分视图？
有许多不同的接口，我希望用户能够以任何顺序呈现接口的任意组合。
我正在考虑创建一个具有 childComponents 属性的 SplitView 组件，该组件需要一组组件进行渲染。我可能会设置反应路由器 URL，例如：
- /分裂/
然后将查询字符串添加到末尾
？views=%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 和经过深思熟虑的状态树。
但是，在我搜索的过程中，我发现了一些很酷的库，它们可以帮助其他人解决类似的问题：
- 反应瓷砖
- 反应马赛克
我认为您的方法可以稍微修改一下。
在你的路线中声明/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的东西，以防止将所有组件加载到一个块中。
就是这个想法
我认为这些答案通常不起作用，我也在努力寻找任何有用的东西。主要原因是在实现拆分视图时，大多数时候您都在尝试重用应用程序中已经存在的其他组件，并尝试让它们在视图的不同侧独立工作。建议的答案不可避免地迫使整个路线设计再次实现，并且需要更改各个组件内部实现的所有链接，这几乎使整个导航模式被破坏。
如果有很好的示例应用程序可以显示其他内容，那就太好了。