How would you implement a split view interface with react-router?

Question

I want to build split view functionality so that a user can view multiple components side by side.

In a single view within my application, the react-router URLs are set up like this:

/user/:id
/chat/:id
/etc/:id

How would you implement react-router to work with split view?

There are many different interfaces and I want the user to be able to render any combination of interfaces in any order.

I was thinking about creating a SplitView component which has a childrenComponents prop, which takes an array of components to be rendered. I could possibly set up react-router URLs like:

/split/

then add a query string to the end

?views=%5B%7B%22component%22:%22chat%22,%22id%22:%22123%22%7D,%7B%22component%22:%22chat%22,%22id%22:%22456%22%7D%5D

Which is an encoded, stringified array of JSON objects

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

This does not feel like the best approach, does anyone have any suggestions?

Update

After trialing several different approaches, I found that managing multi routes was easier without react-router, and instead just using redux and a well thought out state tree.

However, during my time searching I found a few cool libraries that may help other people out there with similar issues:

Have you checked this? https://stackoverflow.com/questions/33062830/using-react-router-with-a-layout-page-or-multiple-components-per-page — Avijit, Jun 19 '18 at 06:38

score 1 · Answer 1 · answered Jun 19 '18 at 06:27

1

I think your approach could be modified a little bit.

Declare in your routes /split/*, it will finally looks like /split/user/1/basket/2/item/3.

Then use this function to get a components list:

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

You have [['user', '1'], ['basket', '2'], ['item', '3']] now. If components order on a page doesn't matter, you could use lodash's fromPairs to get an object.

Use something like react-loadable in your split component in order to prevent loading of all the components in one chunk.

That's the idea

answered Jun 19 '18 at 06:27

Alex Antonov

14,134
7
65
142

Nice usage of lodash, I'll experiment with a basic implementation using this technique – Andy-G Jun 19 '18 at 06:41
Let me know about results, please – Alex Antonov Jun 19 '18 at 06:50

score -1 · Answer 2 · answered Apr 10 '22 at 03:33

I think these answers in general doesn't work, and I am also struggling to find anything will work. Main reason is being when you implement a split view, for the most time you are trying to reuse other components that already exist in the app and trying to let them work independently on different side of the view. The suggested answers inevitably force the entire route design to be implemented again and all the links implemented inside the individual components will need to be changed, which pretty much makes entire navigation pattern broken.

Would be great if there is good example app that can show otherwise.

How would you implement a split view interface with react-router?

2 Answers2