React-router v4 - не может ПОЛУЧИТЬ *url*

Я предполагаю, что вы используете Webpack. Если это так, добавление нескольких вещей в конфигурацию вашего веб-пакета должно решить проблему. В частности, output.publicPath = '/' и devServer.historyApiFallback = true. Ниже приведен пример конфигурации веб-пакета, который использует оба ^ и устраняет проблему обновления для меня. Если вам интересно, «почему», это поможет.

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

Подробнее об этом я писал здесь — Исправление ошибки "cannot GET /URL" при обновлении с React Router (или как работают маршрутизаторы на стороне клиента)

Просто чтобы дополнить ответ Тайлера для тех, кто все еще борется с этим:

Добавление devServer.historyApiFallback: true в конфигурацию моего веб-пакета (без установки publicPath) исправило ошибки 404/Cannot-GET, которые я видел при обновлении/назад/вперед, но только для одного уровня вложенного маршрута. Другими словами, "/" и "/topics" начали работать нормально, но что-то еще (например, "/topics/независимо") по-прежнему вызывало ошибку 404 при обновлении/и т.д.

Только что наткнулся на принятый ответ здесь: Неожиданный токен ‹ ошибка в компоненте ответного маршрутизатора и это дало мне последний недостающий элемент. Добавление ведущего / к src скрипта пакета в моем index.html полностью решило проблему.

Если ваше приложение размещено на статическом файловом сервере, вам нужно использовать вместо файла .

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

Это сработало для меня, просто нужно просто добавить devServer { historyApiFallback: true } в порядке, не нужно использовать publicPath: '/'

использование как:

  devServer: {
    historyApiFallback: true
  },

У меня была та же проблема, что исправило ее для меня, так это редактирование моего файла package.json и под scripts: {

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

в конце кода моего веб-пакета build я добавил --history-api-fallback, это также показалось самым простым решением ошибки Cannot GET /url

Примечание: в следующий раз, когда вы будете строить после добавления --history-api-fallback, вы увидите строку в выводе, которая выглядит следующим образом (с любым вашим индексным файлом):

Ошибка 404 вернется к /index.html.

Если вы используете Express (не Webpack), это сработало для меня.

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

Если вы используете Webpack, проверьте свою конфигурацию в части конфигурации сервера для атрибута «contentBase». Вы можете установить на этом примере:

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

Я также добился успеха, добавив ... historyApiFallback: true

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

Добавляя к принятому ответу, если вы используете HtmlWebpackPlugin и все еще получаете ошибки, дважды проверьте свойство filename. Если вы устанавливаете filename специально для производства, вам нужно будет добавить условие для установки зависимости filename от переменной WEBPACK_DEV_SERVER. См. пример ниже:

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