How to get the content of the page in the react router or from the div

In this example, when clicking on links, the Home and News components are rendered.

import React from 'react' import ReactDOM from 'react-dom' import createClass from 'create-react-class' import {BrowserRouter as Router ,Route ,Link ,browserHistory ,Switch} from 'react-router-dom' // Pages const Home = () => ( <div> <h1>Welcome to Home page !</h1> </div> ); const News = () => ( <div> <h1>this page News !</h1> </div> ); // config Route const Main = () => ( <main> <Switch> <Route exact path='/' component={Home}/> <Route path='/news' component={News}/> </Switch> </main> ); const Header = () => ( <header> <nav> <ul> <li><Link to='/'>Home</Link></li> <li><Link to='/news'>News</Link></li> </ul> </nav> </header> ); // render const App = () => ( <div> <Header /> <Main /> </div> ); ReactDOM.render(( <Router> <App /> </Router> ), document.getElementById('root')); 

but I already have these pages on this site, how can I make the rendering of any components on the pages take place?

As with the usual behavior of links only without rebooting !

that is, I delete this code

 // Pages const Home = () => ( //<div> //<h1>Welcome to Home page !</h1> //</div> ); const News = () => ( //<div> //<h1>this page News !</h1> //</div> );