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 — Chris
– Chris, Commented Apr 4, 2017 at 14:19

Tyler McGinnis · Accepted Answer · 2018-02-04 18:44:53Z

318

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 4, 2018 at 18:44

answered Apr 4, 2017 at 16:16

Tyler McGinnis

35.3k16 gold badges74 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

SKLTFZ Over a year ago

worked by added devServer: { historyApiFallback: true, },

peterorum Over a year ago

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.

Andre Evangelista Over a year ago

It worked for me just addding devServer { historyApiFallback: true } I already had publicPath: '/' configured

BlondCode Over a year ago

+1 from me and do not forget to restart server (if you have hotload enabled) every time you change webpack.config.js.

Jahirul Islam Mamun Over a year ago

It works on devServer. but after build Its not works :(

|

Community · Accepted Answer · 2017-05-23 12:34:22Z

17

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.

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Apr 19, 2017 at 16:23

Will

3332 silver badges8 bronze badges

Comments

kiss_von · Accepted Answer · 2019-09-18 09:37:43Z

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, 2019 at 9:37

kiss_von

1511 silver badge4 bronze badges

Comments

jsina · Accepted Answer · 2018-09-10 10:56:09Z

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, 2018 at 10:56

jsina

4,8791 gold badge34 silver badges28 bronze badges

1 Comment

Jerameel Resco Over a year ago

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')) })

Alexey Masyukov · Accepted Answer · 2023-03-21 19:26:18Z

7

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, 2023 at 19:26

answered Aug 11, 2022 at 22:28

Alexey Masyukov

1511 silver badge3 bronze badges

1 Comment

Mo. Over a year ago

Up to dated solution 👍

Jared · Accepted Answer · 2018-02-18 21:43:52Z

3

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

answered Feb 18, 2018 at 21:43

Jared

3,2361 gold badge30 silver badges42 bronze badges

Comments

Marty McGee · Accepted Answer · 2018-12-24 08:11:49Z

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, 2018 at 8:11

Marty McGee

7749 silver badges11 bronze badges

1 Comment

srishti77714 Over a year ago

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.

ravibagul91 · Accepted Answer · 2019-09-15 11:55:00Z

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, 2019 at 11:55

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

answered Sep 5, 2018 at 22:10

SheldonO'Reilly

212 bronze badges

1 Comment

Akshay Mulgavkar Over a year ago

Where do i add this?

Alex · Accepted Answer · 2018-06-14 16:22:18Z

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, 2018 at 16:22

Alex

1,3251 gold badge17 silver badges13 bronze badges

Comments

technoY2K · Accepted Answer · 2021-05-18 19:49:25Z

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, 2021 at 19:49

technoY2K

2,5901 gold badge28 silver badges38 bronze badges

2 Comments

7urkm3n Over a year ago

what's PROD_HTML_PATH ?

technoY2K Over a year ago

It is an arbitrary variable name for the path you would want to use for production. The variable could be named anything @7urkm3n

Md Khairul Islam · Accepted Answer · 2022-07-18 00:57:18Z

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'
            })
          ]
        };

Collectives™ on Stack Overflow

React-router v4 - cannot GET url

11 Answers 11

14 Comments

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

14 Comments

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related