Render two components at two different ids- React

I have a situation where I require to render two different components at two DIFFERENT ids. Something like this:

ReactDOM.render(
 <Component1/>,
document.getElementById('Coponent-id-1'));

and:

var deal_recommendations_id = document.getElementById('deal_recommendations_app');
       ReactDOM.render(
     <Component2/>,
    document.getElementById('Coponent-id-2'));

P.S This is different scenario than wrapping two component with a div and then rendering it on a single id

I'm actually trying to do this:

ReactDOM.render((
    <Provider store={store}>
        <Router history={hashHistory}>
            <Route path="/" component={WizardApp}> </Route>
             <Route path="/overview" component={DealRecommendation}></Route> 
             <Route path="/overview/:deal" component={DealRecommendation}></Route>         
            <Route path="/users/invite" component={ReferralApp}></Route> 
            <Route path="/adm/custodian" component={CustodianApp}></Route> 

        </Router>
    </Provider>
    ), document.getElementById('appRoot')
);
   var deal_recommendations_id = document.getElementById('deal_recommendations_app');
ReactDOM.render(
 <DealRecommendation/>,
deal_recommendations_id);

P.P.S In normal cases it works fine as shown in the answers. In my case, at deal_recommendations_id three Links(react Links) are loaded. when I click on any of these, I get an error message:

Link.js:95 Uncaught TypeError: Cannot read property 'pushState' of undefined

Here is the complete snippet:

   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 => f
));



ReactDOM.render((
    <Provider store={store}>
        <Router history={hashHistory}>
            <Route path="/" component={WizardApp}> </Route>
             <Route path="/overview" component={DealRecommendation}></Route> 
             <Route path="/overview/:deal" component={DealRecommendation}></Route>         
            <Route path="/users/invite" component={ReferralApp}></Route> 
            <Route path="/adm/custodian" component={CustodianApp}></Route> 

        </Router>
    </Provider>
    ), document.getElementById('appRoot')
);

var deal_recommendations_id = document.getElementById('deal_recommendations_app');
ReactDOM.render(
 <DealRecommendation/>,
deal_recommendations_id);

See the snapshot. The upper div works fine (in this case, this.props.params are getting populated too). However, the lower div which I think gets initialized even before the <Routers> are defined is causing the problem I think. (in this case, this.props.params is coming as undefined)

-------------------DealRecommendation.js------------------------------------

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(
        <div className="deal_data_wrapper">
          <h3>Deals of Interest</h3>
          <RouterTabs/>
          <h2>this is activity</h2>
        </div>
        )  
    }

    else if(this.props.params.deal==="deal_news"){
         return(
        <div className="deal_data_wrapper">
          <h3>Deals of Interest</h3>
          <RouterTabs/>
           <h2>This is Deal_news</h2>
        </div>
        )  

    }
    else{

         return(
        <div className="deal_data_wrapper">
          <h3>Deals of Interest</h3>
          <RouterTabs/>
           <h2>This works too</h2>
        </div>
        )  

      }
    }

    else{
         return(
        <div className="deal_data_wrapper">
          <h3>Deals of Interest</h3>
          <RouterTabs/>

          <h2>This doesn't work</h2>
        </div>
        )  
    }

  }
}