Why react-router does not work in the server? It shows 404 error after refreshing the page

Question

I have the project that was deployed in the server, but the react router doesn`t work properly. However, it works fine in the local server. I have no idea why? I mean that when i go to different page and refresh, it shows me 404 error. Please, someone help!!! For example: https://sciencepark.kz/researchpage

my react router code

const App=(props)=>{
    return(
        <Router history={browserHistory}>
            <Route path={"/"} component={Root}>
                <IndexRoute component={Layout}/> // make default page appears in main page
                <Route path={"newspage"} component={NewsPageContainer}/> //passing params
                <Route path={"researchpage"} component={ResearchPageContainer}/> //passing params
                <Route path={"servicepage"} component={ServicePage}/> //passing params
                <Route path={"businessincubatorpage"} component={BusinessIncubatorPage}/> //passing params
                <Route path={"startuppage"} component={StartUpPageContainer}/> //passing params
                <Route path={"fullinfomedia(/:id)"} component={FullInfoMediaContainer}/> //passing params
                <Route path={"fullinfonews(/:id)"} component={FullInfoNewsContainer}/> //passing params
                <Route path={"fullinfostartups(/:id)"} component={FullInfoStartUpsContainer}/> //passing params
                <Route path={"fullinforesearches(/:id)"} component={FullInfoResearchesContainer}/> //passing params
                <Route path={"layout"} component={Layout}/>
            </Route>
            <Route path={"layout"} component={Layout}/>
        </Router>
    )
  };

Answer 1

The browserHistory in your code may need a basename. See if a similar question's answer works for you: https://stackoverflow.com/a/36765496/4772334

Answer 2

you need to add basename with useRouterHistory.

const browserHistory = useRouterHistory(createHistory)({
     basename: '/myPage/public'
    });

//Middleware

const middleware = [
  ...
  ...
 routerMiddleware(browserHistory) 
];

// Apply all the middleware for Redux

const enhancers = composeEnhancers(
  applyMiddleware(...middleware)
);