Unable to hit URL using GET method with params - reactjs

Question

I have used react-router-dom with webpack and weppack-dev-server for development. My project is running, but when i directly hitting the url with paramameters in browser then it gives me
GET http://localhost:8080/archives/index.js net::ERR_ABORTED otherwise i hit the same url with Link component then it is running
//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, hashHistory} from 'react-router-dom';
import Archives from './modules/Archives';
import Layout from './modules/Layout';
import Featured from './modules/Featured';
import Settings from './modules/Settings';
import Home from './modules/Home';
console.log('hi');
ReactDOM.render((
<Router history={hashHistory}>
<div>
<Layout/>
<Route exact path={'/'} component={Home}/>
<Route path={'/featured'} component={Featured}/>
<Route path={'/archives/:id'} component={Archives}/>
<Route exact path={'/archives'} component={Archives}/>
<Route path={'/settings'} component={Settings}/>
</div>
</Router>
),document.getElementById('app'));
///////////////////////////////////////////////////////////////////////////
//Layout.js
import React from 'react';
import { Link } from 'react-router-dom';
import '../css/main.css';
const bstyle = {
color:'white',
background: 333333,
margin: '-9px',
};
export default class Layout extends React.Component{
render() {
return(
<div>
<h1>React Application</h1>
<ul>
<li><Link className='linktext' to='/'>Home</Link></li>
<li><Link className='linktext' to='/archives'>Archives</Link></li>
<li><Link className='linktext' to='/featured'>Featured</Link></li>
<li><Link className='linktext' to='/settings'>Settings</Link></li>
</ul>
{this.props.children}
</div>
)
}
}