React-router v4 - cannot GET *url*
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)
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.
It worked for me just need just addding devServer { historyApiFallback: true }
is OK, not need use publicPath: '/'
usage like:
devServer: { historyApiFallback: true },