Javascript 您将如何使用react路由器实现拆分视图接口？_Javascript_Reactjs_React Router_Splitview

Javascript 您将如何使用react路由器实现拆分视图接口？

javascript reactjs

Javascript 您将如何使用react路由器实现拆分视图接口？,javascript,reactjs,react-router,splitview,Javascript,Reactjs,React Router,Splitview,我想构建拆分视图功能，以便用户可以并排查看多个组件在我的应用程序的单个视图中，react路由器URL的设置如下： /用户/：id /chat/：id /etc/：id 您将如何实现react路由器以使用拆分视图有许多不同的界面，我希望用户能够以任何顺序呈现任何组合的界面我正在考虑创建一个SplitView组件，该组件有一个childrenComponents道具，它需要渲染一组组件。我可能会设置以下URL： /分裂/ 然后在末尾添加一个查询字符串？视图=%5B%7B%22组件%

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

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

/用户/：id
/chat/：id
/etc/：id

您将如何实现react路由器以使用拆分视图

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

我正在考虑创建一个SplitView组件，该组件有一个childrenComponents道具，它需要渲染一组组件。我可能会设置以下URL：

/分裂/

然后在末尾添加一个查询字符串

？视图=%5B%7B%22组件%22:%22chat%22，%22id%22:%22123%22%7D，%7B%22组件%22:%22chat%22，%22id%22:%22456%22%7D%5D

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

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

这不是最好的方法，有人有什么建议吗

更新

在试用了几种不同的方法之后，我发现不用react路由器管理多个路由更容易，而只需使用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']]

fromPairs

react loadable