react-router-dom usage in index.js - reactjs

Question

In my index.js file:
import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import App from './App';
import Contact from './Contact';
import ReactDOM from 'react-dom';
//import RouterMapping from './RouterMapping';
const RouterMapping = () => (
<Router>
<Route exact path='/' component={App} />
<Route path='/contact' component={Contact} />
</Router>
);
ReactDOM.render(
<RouterMapping />,
document.getElementById('root')
);
When rendering the page /, it displays nothing (should go to App component per my understanding. The App component itself is running OK if I replace:
ReactDOM.render(
<RouterMapping />,
document.getElementById('root')
);
to
ReactDOM.render(
<App />,
document.getElementById('root')
);
Did I do something fundamentally wrong? Newbie to React...
Update on Mar 16
I think I figured out how to make the router work.
I have refactored my RouterMapping to RoutingConfig as below:
import React from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Home from './Home';
import Contact from './Contact';
const RoutingConfig = () => (
<Router>
<div>
<Route exact path="/" component={Home}/>
<Route path="/contact" component={Contact}/>
</div>
</Router>
);
export default RoutingConfig;
Nothing peculiar.
Now, instead of rendering RoutingConfig in my index.js, I still render the App component in my index.js:
ReactDOM.render(
<App />,
document.getElementById('root')
);
The routing mapping is done now in App.js:
class App extends Component {
render() {
return (
<RoutingConfig />
);
}
}
Now it works. Please see attached screenshot:
My explanation
I think the key here is to demote the RoutingConfig to App.js. From index.js render App.js, App.js will act as the entry point to my whole app and determine which component (Home, Contact) to load based on routing.
Above for your information and hope it is helpful.