React router not working after building the app

Question

I am new to react and react-router. The app is created using create-react-app. I need to implement routing in my app with two main pages. I have tried many options and finally made it work with the following code.

This code works fine during development. But after building the app, its not working properly. The route to 404 page is only getting displayed. Please help me resolve this.

<Router history={browserHistory}>
  <Route component={Root}>
    <IndexRoute component={App} />
    <Route path="/" component={App} />
    <Route path="/sna/:country" component={SNA} />
    <Route path="*" component={FourOFour}/>
  </Route>
</Router>

I have used browserHistory to enable navigation on changing a dropdown using below code.

selectCountry(event){
    var value = event.target.value;
    browserHistory.push('/sna/' + value);
}

package.json

  {
  "name": "my-app",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.7",
    "react": "^15.4.2",
    "react-addons-update": "^15.4.2",
    "react-bootstrap": "^0.30.8",
    "react-data-grid": "^2.0.24",
    "react-dom": "^15.4.2",
    "react-router": "^2.6.0"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

After getting stuck on react-router for a couple of days, I read the documentation in React Training. Then I followed the quick start steps and modified it to satisfy my requirements.

import {
  HashRouter as Router,
  Route,
  } from 'react-router-dom';

  <Router>
    <div>
      <Header />
      <Route exact path="/" component={Content} />
      <Route path="/:country" component={SnaContent} />
      <Footer />
    </div>
  </Router>

This have fixed the issue for now. Hope its helpful for others who faced similar issue.