I'm working with react router dom, when i open my application everythink working fine but when i do refresh to the page there is some issue heppened like in the screenshot. this happened just in the server but in the local everythink working fine. Any idea please for this problem!

enter image description here

App.js

import React, { Component } from 'react'
import { HashRouter, Route, Switch, Redirect, BrowserRouter } from 'react-router-dom'


const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <React.Suspense fallback={loading}>
          <Switch>
            <Route exact path="/login" name="Login Page" render={(props) => <Identify {...props} />} />

          </Switch>
        </React.Suspense>
      </BrowserRouter>
    )
  }
}
 
export default App

routes.js

import React from 'react'
import { Router, Route, browserHistory, IndexRoute } from 'react-router'

const routes = [
  // { path: '/login', exact: true, name: 'Home' },
  { path: '/dashboard', name: 'Dashboard', component: Dashboard }

]
export default routes