React-router v4 - cannot GET url

Question

I started to use react-router v4. I have a simple <Router> in my app.js with some navigation links (see code below). If I navigate to localhost/vocabulary, router redirects me to the right page. However, when I press reload (F5) afterwards (localhost/vocabulary), all content disappear and browser report Cannot GET /vocabulary. How is that possible? Can somebody gives me any clue how to solve that (reload the page correctly)?

App.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { Switch, Redirect } from 'react-router'
import Login from './pages/Login'
import Vocabulary from './pages/Vocabulary'

const appContainer = document.getElementById('app')

ReactDOM.render(
  <Router>
    <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/vocabulary">Vocabulary</Link></li>
        </ul>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/vocabulary" component={Vocabulary} />
        </Switch>
    </div>
  </Router>,
appContainer)

Possible duplicate of [React-router urls don't work when refreshing or writting manually](http://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writting-manually) — Chris, Apr 04 '17 at 14:19

Tyler McGinnis · Accepted Answer · 2018-02-04T18:44:53.797

310

I'm assuming you're using Webpack. If so, adding a few things to your webpack config should solve the issue. Specifically, output.publicPath = '/' and devServer.historyApiFallback = true. Here's an example webpack config below which uses both of ^ and fixes the refresh issue for me. If you're curious "why", this will help.

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

I wrote more about this here - Fixing the "cannot GET /URL" error on refresh with React Router (or how client side routers work)

edited Feb 04 '18 at 18:44

answered Apr 04 '17 at 16:16

Tyler McGinnis

34,836
16
72
77

30

worked by added devServer: { historyApiFallback: true, }, – SKLTFZ Sep 13 '17 at 04:20
1

And don't use HtmlWebpackPlugin with index.html as a template as the bundle is not injected on refreshing on a route. Insert the bundle.js script directly as a script tag in the index.html. – peterorum Sep 20 '17 at 13:26
4

It worked for me just addding `devServer { historyApiFallback: true }` I already had `publicPath: '/'` configured – Andre Evangelista Dec 04 '17 at 13:13
Thank you! In many sources they all say add historyApiFallback but they had never mentioned about output.publicPath = '/'. I did not configured my publicPath so i couldn't solve my problem until see your post. – Nezih Feb 16 '18 at 13:49
This worked for me as well adding `historyApiFallback: true` to the devServer. – Cazineer Mar 20 '18 at 19:17
I have both `historyApiFallback: true` and `publicPath: /`, but it's not working... also I'm using express-server... do I need to configure express instead of webpack? – jsdev17 Mar 25 '18 at 19:17
1

+1 from me and do not forget to restart server (if you have hotload enabled) every time you change webpack.config.js. – BlondCode Jul 05 '18 at 09:35
And what about production config? – Alex Green Dec 03 '18 at 10:15
@SKLTFZ What is the solution if i am not using webpack? – Bhatt Akshay Mar 01 '19 at 04:18
How to fix this without setting ```historyApiFallback: true```? – Huy Dec 15 '19 at 16:44
2

It works on devServer. but after build Its not works :( – Jahirul Islam Mamun Feb 07 '20 at 19:49
historyApiFallback is enough for me – k4st0r42 Apr 28 '21 at 13:06
1

A more detailed description of this solution and what happens behind the scenes https://ui.dev/react-router-cannot-get-url-refresh – Alex P. Jul 05 '22 at 12:00
Don't forget to restart the app. To do another start, after changing the webpack.config.js. npm start. – Naloiko Eugene Sep 23 '22 at 19:24

score 17 · Answer 2 · edited May 23 '17 at 12:34

Just to supplement Tyler's answer for anyone still struggling with this:

Adding the devServer.historyApiFallback: true to my webpack config (without setting publicPath) fixed the 404/Cannot-GET errors I was seeing on refresh/back/forward, but only for a single level of nested route. In other words, "/" and "/topics" started working fine but anything beyond that (e.g. "/topics/whatever") still threw a 404 on refresh/etc.

Just came across the accepted answer here: Unexpected token < error in react router component and it provided the last missing piece for me. Adding the leading / to the bundle script src in my index.html has solved the issue completely.

score 12 · Answer 3 · answered Sep 18 '19 at 09:37

12

It worked for me just need just addding devServer { historyApiFallback: true } is OK, not need use publicPath: '/'

usage like:

  devServer: {
    historyApiFallback: true
  },

answered Sep 18 '19 at 09:37

kiss_von

151
1
4

score 9 · Answer 4 · answered Sep 10 '18 at 10:56

9

If your application is hosted on a static file server, you need to use a instead of a .

import { HashRouter } from 'react-router-dom'

ReactDOM.render((
  <HashRouter>
    <App />
  </HashRouter>
), holder)

https://github.com/ReactTraining/react-router/blob/v4.1.1/FAQ.md#why-doesnt-my-application-render-after-refreshing

answered Sep 10 '18 at 10:56

jsina

4,433
1
30
28

1

The article you've referenced was really helpful because I was using express.js. This code from the article gave me the hint and solution of accepting different URL aside from the "/" since it has an asterisk as an argument of get() function. app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, 'index.html')) }) – Jerameel Resco Jun 29 '20 at 06:52

Alexey Masyukov · Answer 5 · 2023-03-21T19:26:18.843

6

Works with React-router v6 and Webpack 5
(https://webpack.js.org/configuration/dev-server/#devservermagichtml):

devServer: {
   magicHtml: true,
   historyApiFallback: true,
},
plugins: [
   new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/index.html'),
      publicPath: '/',
   })
]

edited Mar 21 '23 at 19:26

answered Aug 11 '22 at 22:28

Alexey Masyukov

141
1
3

Up to dated solution – Mo. Jan 16 '23 at 19:38

score 3 · Answer 6 · answered Feb 18 '18 at 21:43

I was having the same issue, what fixed it for me was editing my package.json file, and under scripts: {

"build": "webpack -d && copy src\\index.html dist\\index.html /y && webpack-dev-server --content-base src --inline --port 3000"

at the end of my webpack build code I added --history-api-fallback this also seemed like the easiest solution to the Cannot GET /url error

Note: the next time you build after adding --history-api-fallback you will notice a line in the output that looks like this (with whatever your index file is):

404s will fallback to /index.html

score 3 · Answer 7 · answered Dec 24 '18 at 08:11

3

If you are using Express (not Webpack), this worked for me..

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

answered Dec 24 '18 at 08:11

Marty McGee

745
8
11

Where do you have to write this code ? In which file of the backend ? I have app.js , index.js and then inside controllers different routers. I am using express.js. Also about the path of index.html. Which path are we talking about ? I have the frontend build folder inside my root directory of backend. – srishti77714 Mar 26 '21 at 10:41

score 2 · Answer 8 · edited Sep 15 '19 at 11:55

2

I also had success with this by adding ... historyApiFallback: true

devServer: {
    contentBase: path.join(__dirname, "public"),
    watchContentBase: true,
    publicPath: "/dist/",
    historyApiFallback: true
}

edited Sep 15 '19 at 11:55

ravibagul91

20,072
5
36
59

answered Sep 05 '18 at 22:10

SheldonO'Reilly

21
2

1

Where do i add this? – Akshay Mulgavkar Jan 05 '22 at 04:06

score 1 · Answer 9 · answered Jun 14 '18 at 16:22

1

If you use Webpack check your configuration in part of server configuration for the "contentBase" attribute. You can set by this example:

devServer: {
    ...
    contentBase: path.join(__dirname, '../')
    ...
}

answered Jun 14 '18 at 16:22

Alex

1,297
1
16
12

score 0 · Answer 10 · answered May 18 '21 at 19:49

0

Adding to the accepted answer, if you are using the HtmlWebpackPlugin and still getting errors double check the filename property. If you are setting the filename specifically for production then you will need to add a condition to set the filename contingent on the WEBPACK_DEV_SERVER variable. Please see the example below:

new HtmlWebpackPlugin({
   template: './src/index.html',
   filename: process.env.WEBPACK_DEV_SERVER ? 'index.html' : PROD_HTML_PATH,
})

answered May 18 '21 at 19:49

technoY2K

2,442
1
24
38

what's `PROD_HTML_PATH` ? – 7urkm3n Aug 11 '21 at 15:21
It is an arbitrary variable name for the path you would want to use for production. The variable could be named anything @7urkm3n – technoY2K Aug 11 '21 at 16:22

score 0 · Answer 11 · answered Jul 18 '22 at 00:57

If you are using webpack. You need to add 

        devServer: {
            historyApiFallback: true,
          }
        
        Example :: 
        
        var path = require('path');
        var HtmlWebpackPlugin = require('html-webpack-plugin');
        
        module.exports = {
          entry: './app/index.js',
          output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'index_bundle.js',
            publicPath: '/'
          },
          module: {
            rules: [
              { test: /\.(js)$/, use: 'babel-loader' },
              { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
            ]
          },
          devServer: {
            historyApiFallback: true,
          },
          plugins: [
            new HtmlWebpackPlugin({
              template: 'app/index.html'
            })
          ]
        };

React-router v4 - cannot GET url

11 Answers11

Linked

Related

React-router v4 - cannot GET *url*

11 Answers11

Linked

Related

React-router v4 - cannot GET url