routing not happening in react router version 4

I may have done silly mistake this time but I am but getting it what. I started with react router v4 but my routing is not happening. I try to hit url manually as well as by button click no result. here's my route config. and FYI I am using LinkContaier to redirection

import ReactDOM from 'react-dom';
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from './stores/configureStores';
import {BrowserRouter,Route,Switch} from 'react-router-dom'
import HeaderContainer from "./containers/HeaderContainer"
import ProgramProfileContainer from "./containers/ProgramProfileContainer"
const store = configureStore();


ReactDOM.render(
  <Provider store={store}>
     <BrowserRouter >
      <Switch>
        <HeaderContainer/>
        {/* <Route exact path="/" component={HeaderContainer}/> */}
          <Route path="program-profile/:program_id" component={ProgramProfileContainer}/>   
      </Switch>
    </BrowserRouter>
  </Provider>, document.getElementById('root')
);

this is my container

import React from "react"
import { connect } from 'react-redux';

export default class ProgramProfileContainer extends React.Component{

    render(){
        console.log("program profile")
        return(
            <h1> this is profile </h1>
        )
    }
}

i hit the url like program-profile/3 but rendered nothing no error in console also

Don't use switch inside browser router :

ReactDOM.render(
   <Provider store={store}>
      <BrowserRouter >
        <div>
           <Route exact path="/" component={HeaderContainer}/>
           <Route path="/program-profile/:program_id" component={ProgramProfileContainer}/>   
       </div>
     </BrowserRouter>
 </Provider>, document.getElementById('root')
);