title: Render two components at two different ids- React
body: <p><a href="https://i.stack.imgur.com/XCuLw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XCuLw.png" alt="enter image description here"></a>I have a situation where I require to render two different components at two DIFFERENT ids. Something like this:</p>
  
  <pre><code>ReactDOM.render(
   &lt;Component1/&gt;,
  document.getElementById('Coponent-id-1'));
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>var deal_recommendations_id = document.getElementById('deal_recommendations_app');
         ReactDOM.render(
       &lt;Component2/&gt;,
      document.getElementById('Coponent-id-2'));
  </code></pre>
  
  <blockquote>
    <p>P.S This is different scenario than wrapping two component with a
    <code>div</code> and then rendering it on a single <code>id</code></p>
  </blockquote>
  
  <p>I'm actually trying to do this:</p>
  
  <pre><code>ReactDOM.render((
      &lt;Provider store={store}&gt;
          &lt;Router history={hashHistory}&gt;
              &lt;Route path="/" component={WizardApp}&gt; &lt;/Route&gt;
               &lt;Route path="/overview" component={DealRecommendation}&gt;&lt;/Route&gt; 
               &lt;Route path="/overview/:deal" component={DealRecommendation}&gt;&lt;/Route&gt;         
              &lt;Route path="/users/invite" component={ReferralApp}&gt;&lt;/Route&gt; 
              &lt;Route path="/adm/custodian" component={CustodianApp}&gt;&lt;/Route&gt; 
  
          &lt;/Router&gt;
      &lt;/Provider&gt;
      ), document.getElementById('appRoot')
  );
     var deal_recommendations_id = document.getElementById('deal_recommendations_app');
  ReactDOM.render(
   &lt;DealRecommendation/&gt;,
  deal_recommendations_id);
  </code></pre>
  
  <p>P.P.S In normal cases it works fine as shown in the answers. 
  In my case, at <code>deal_recommendations_id</code> three <code>Links</code>(react Links) are loaded. when I click on any of these, I get an error message:</p>
  
  <pre><code>Link.js:95 Uncaught TypeError: Cannot read property 'pushState' of undefined
  </code></pre>
  
  <p>Here is the complete snippet:</p>
  
  <pre><code>   import React, { Component } from 'react';
  import ReactDOM from "react-dom";
  
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware, compose } from 'redux';
  import thunk from 'redux-thunk';
  
  import rootReducer from './reducers';
  
  // import App from './components/App';
  import WizardApp from './components/WizardApp';
  import DealRecommendation from './components/dealRecommendation';
  import ReferralApp from './components/referral/ReferralApp';
  import CustodianApp from './components/admin/custodian/CustodianApp';
  import { Router, Route, IndexRoute, Link, browserHistory, hashHistory } from 'react-router'
  
  const store = createStore(rootReducer,compose(
      applyMiddleware(thunk),
      window.devToolsExtension ? window.devToolsExtension() : f =&gt; f
  ));
  
  
  
  ReactDOM.render((
      &lt;Provider store={store}&gt;
          &lt;Router history={hashHistory}&gt;
              &lt;Route path="/" component={WizardApp}&gt; &lt;/Route&gt;
               &lt;Route path="/overview" component={DealRecommendation}&gt;&lt;/Route&gt; 
               &lt;Route path="/overview/:deal" component={DealRecommendation}&gt;&lt;/Route&gt;         
              &lt;Route path="/users/invite" component={ReferralApp}&gt;&lt;/Route&gt; 
              &lt;Route path="/adm/custodian" component={CustodianApp}&gt;&lt;/Route&gt; 
  
          &lt;/Router&gt;
      &lt;/Provider&gt;
      ), document.getElementById('appRoot')
  );
  
  var deal_recommendations_id = document.getElementById('deal_recommendations_app');
  ReactDOM.render(
   &lt;DealRecommendation/&gt;,
  deal_recommendations_id);
  </code></pre>
  
  <p>See the snapshot. The upper div works fine (in this case, <code>this.props.params</code> are getting populated too). However, the lower div which I think gets initialized even before the <code>&lt;Routers&gt;</code> are defined is causing the problem I think. (in this case, <code>this.props.params</code> is coming as <code>undefined</code>)</p>
  
  <p>-------------------DealRecommendation.js------------------------------------</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { Router, Route, IndexRoute, Link, browserHistory, hashHistory } from 'react-router';
  import { createHistory } from 'history';
  import RouterTabs from "./dealsOfInterest/routerTabs"
  import '../style/deal_recommendation.css';
  
  
  export default class DealRecommendation extends React.Component{
  
    constructor(){
      super();
    }
  
  
    render(){
      if(this.props.params!=undefined){
      if(this.props.params.deal==="rec_act"){
         return(
          &lt;div className="deal_data_wrapper"&gt;
            &lt;h3&gt;Deals of Interest&lt;/h3&gt;
            &lt;RouterTabs/&gt;
            &lt;h2&gt;this is activity&lt;/h2&gt;
          &lt;/div&gt;
          )  
      }
  
      else if(this.props.params.deal==="deal_news"){
           return(
          &lt;div className="deal_data_wrapper"&gt;
            &lt;h3&gt;Deals of Interest&lt;/h3&gt;
            &lt;RouterTabs/&gt;
             &lt;h2&gt;This is Deal_news&lt;/h2&gt;
          &lt;/div&gt;
          )  
  
      }
      else{
  
           return(
          &lt;div className="deal_data_wrapper"&gt;
            &lt;h3&gt;Deals of Interest&lt;/h3&gt;
            &lt;RouterTabs/&gt;
             &lt;h2&gt;This works too&lt;/h2&gt;
          &lt;/div&gt;
          )  
  
        }
      }
  
      else{
           return(
          &lt;div className="deal_data_wrapper"&gt;
            &lt;h3&gt;Deals of Interest&lt;/h3&gt;
            &lt;RouterTabs/&gt;
  
            &lt;h2&gt;This doesn't work&lt;/h2&gt;
          &lt;/div&gt;
          )  
      }
  
    }
  }
  </code></pre>