javascript – Render multpile ReactJS components in Laravel without using ReactJS Router-ThrowExceptions

Exception or error:

I want to render multiple ReactJS components in new window tab. I want to use PHP Laravel Router to render multiple components.

I tried:

1. In view file I have <div id="root"></div> in index.js file I have

ReactDOM.render(<App ></App>, document.getElementById('root'));

I use two ReactDOM.render with different div ID and components, it gives me following error:

Target Container is not a DOM element

I searched for this error but couldn’t find the solution.

2. I tried below code without any router:
I write below code in reducer(Redux) JS file on onclick event action dispatch.

import secondComponent from '../PathToFile';
.
.
var newWindow= window.open('', '', 'width=600,height=400,left=200,top=200');
var element =  document.createElement('div');
element.innerHTML = <secondComponent/>;
newWindow.document.body.appendChild(element);

but it results:

[object object]

in new window tab. Am I missing something?

Please guide me. Where I am doing wrong?

How to solve:

I guess I do not understand your question very well but I think you should add more root element and it is possible, I mean:

<div id="root"></div>
<div id="that-component-root"></div>

And on your codes based on your PHP routing import each bundled files. each bundled files should inject into their own root element:

ReactDOM.render(<App />, document.getElementById('root'));

And

ReactDOM.render(<ThatComponentRoot />, document.getElementById('root'));

etc.

But I think if I understand your problem truly, It is possible your project maybe will be very complex.

Leave a Reply

Your email address will not be published. Required fields are marked *