React-router: When I refresh the browser Cannot GET thiscurrent router

[naihe138]

router config

const routes = [
  { 
    path: '/',
    exact: true,
    component: Main
  },
  { 
    path: '/plan',
    component: PranList
  },
  { 
    path: '/study',
    component: StudyList,
    routes: [
      {
        path: '/study/',
        component: BCMain
      },
      {
        path: '/study/bus',
        component: Bus
      },
      {
        path: '/study/cart',
        component: Cart
      }
    ]
  },
  {
    component: NoMatch
  }
]

from '/' to '/plan' is normal

When I refresh the browser Cannot GET thiscurrent router

[mhazy]

This isn't an issue with React Router, this occurs with any client-side routing for single page applications.

The reason this occurs is because whatever is serving your application doesn't know what to do with /plan, it only exists on the client, so it gives you a 404.

The configuration depends on what you're serving your application with, but, the gist of it is you'll need to send all paths that aren't static files to load index.html.

Apache -> mod_rewrite
Nginx -> rewrite
Webpack Dev Server -> historyApiFallback
Express/Koa/Hapi/etc. -> a wildcard route to your index.html

[prettyGIT]

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing
This may help you

[pshrmn]

As @mhazy said, you need a server in order to support "pretty" URIs. This is also covered in React Router's FAQs https://github.com/ReactTraining/react-router/blob/v4.1.1/FAQ.md#why-doesnt-my-application-render-after-refreshing

[ashah023]

In my case, I was using hash routing, so the routes were broken. Fixed it with:

import { createHashHistory } from 'history'

// create history
const history = createHashHistory({
  basname: '',
  hashType: 'slash'
}

// pass to middleware
const store = createStore(
  combineReducers(merge(reducers, { router: routerReducer })),
  applyMiddleware(thunkMiddleware, routerMiddleware(history))
)

[a-m-dev]

for any one using webpack dev server :

you guys just need to add this to your config file

devServer: {
    contentBase: './src',
    stats: "errors-only",
    port: 9000,
    open:true,
    historyApiFallback: true
  }

historyApiFallback will handle that ....