getting 404 error in react-router-dom - reactjs

Question

I have started with react-router-dom. my main page rendered successfully but when I am clicking on hyper provided by Link component it is not redirecting but if I hit url manually it is giving me 404 error. please help me in this?
here is my config file
import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware,compose } from 'redux'
import { Provider } from 'react-redux'
//import rootReducer from './reducers'
import createLogger from 'redux-logger'
import thunk from 'redux-thunk'
import {BrowserRouter} from 'react-router-dom'
import promise from "redux-promise-middleware"
import logger from "redux-logger"
import {fetchUsers} from "./action/UserAction"
import {fetchChart} from "./action/ChartAction"
import {fetchNames} from "./action/SearchAction"
import reducer from "./reducers"
import routes from "./routes"
const middleware = applyMiddleware(promise(), thunk, logger())
const store= createStore(reducer,middleware)
store.dispatch(fetchUsers());
store.dispatch(fetchChart());
render(
<Provider store={store}>
<BrowserRouter >
{routes}
</BrowserRouter>
</Provider>,
document.getElementById('root')
)
my routes file
import App from "./pages/App"
import Users from "./pages/Users"
import Charts from "./pages/Charts"
import React from "react"
import { Route } from "react-router-dom"
export default (
<switch>
<Route path="/" component={App}/>
<Route path="/users" component={Users}/>
<Route path="/charts" name="charts" component={Charts}/>
</switch>
);
App.js
import {Link} from "react-router-dom"
import React from "react"
const App = () =>(
<div>
<h1> this is main page </h1>
<Link to="charts">charts</Link>
</div>
)
export default App
Users.js
import React from "react"
const User = () =>(
<div>
<h1> this is user </h1>
</div>
)
export default User
Charts.js
import React from "react"
const Chart = () => (
<h1> this is chart </h1>
)
export default Chart
UPDATE 1:
I do not know what is going on. but I alter the sequence in routes.js it is working by clicking on url. but still if I hit the url manually or refresh there it is still not working. below is my updated routes.js
import App from "./pages/App"
import Users from "./pages/Users"
import Charts from "./pages/Charts"
import React from "react"
import { Route,Switch } from "react-router-dom"
export default (
<Switch>
<Route path="/charts" component={Charts}/>
<Route path="/users" component={Users}/>
<Route path="/" component={App}/>
</Switch>
);
UPDATE 2:
if I am using exact path then sequence does not matter. I think I didn't understand use of exact path correctly. but still while hitting url manually or refreshing is not working for me
my final routes.js
import App from "./pages/App"
import Users from "./pages/Users"
import Charts from "./pages/Charts"
import React from "react"
import { Route,Switch } from "react-router-dom"
export default (
<Switch>
<Route exact path="/" component={App}/>
<Route exact path="/charts" component={Charts}/>
<Route exact path="/users" component={Users}/>
</Switch>
);

Answer 1

After struggling I got a SO post saying that if my data is not mapping from backend I should use HashRouter. So I changed my browser so I changed my code to this. but I don't know why browser router didn't work
<Provider store={store}>
<HashRouter >
{routes}
</HashRouter>
</Provider>,
document.getElementById('root')

Answer 2

If you are using webpack add this
devServer: {
historyApiFallback: true,
}
when using BrowserRouter "historyApiFallback" should be true