Rendering same component twice in different pages in React
<pre><code>import React from "react";
import ReactDOM from "react-dom";

import Pagination from "./components/pagination.js";
import Header from "./components/header.js";
import DataBox from "./components/stats.js"

const imageHeaderIndex = document.getElementById("imageHeaderIndex");
const navBarIndex = document.getElementById("navBarIndex");

const imageHeader = document.getElementById("imageHeader");
const navBar = document.getElementById("navBar");
const dataDiv = document.getElementById("textualContent");

ReactDOM.render(&lt;Header/&gt;, imageHeaderIndex)
ReactDOM.render(&lt;Pagination/&gt;, navBarIndex)

ReactDOM.render(&lt;Header/&gt;, imageHeader)
ReactDOM.render(&lt;Pagination/&gt;, navBar)
ReactDOM.render(&lt;DataBox url="http://localhost:8081/stats/pageInfo" pollInterval={2000}/&gt;, dataDiv);
</code></pre>

<p>Hello all, I am very new to javascript and react. I have the code above and I was trying to render the same react component twice, but on different pages. 
ids = imageHeaderIndex and navBarIndex belong to index.html, while the rest belong to another page (stats.html)</p>

<p>However, the components are not reflected on stats.html. And I faced the error: Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element. Anybody knows why?</p>