I want to render multiple ReactJS components in new window tab. I want to use PHP Laravel Router to render multiple components.
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:
in new window tab. Am I missing something?
Please guide me. Where I am doing wrong?
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'));
ReactDOM.render(<ThatComponentRoot />, document.getElementById('root'));
But I think if I understand your problem truly, It is possible your project maybe will be very complex.