React Router с путем вроде / list /: страница не работает при перезагрузке - PullRequest
0 голосов
/ 03 ноября 2019

У меня настроено несколько маршрутов, например:

<Route path="/" exact={true} component={test0} />
<Route path="/test1" exact={true} component={test1} />
<Route path="/test2" exact={true} component={test2} />
<Route path="/test3/options" exact={true} component={test3} />
<Route path="/test4/data/:id" exact={true} component={test4} />
<Route path="/list/:page" exact={true} component={list} />

Обычная маршрутизация работает, когда мы нажимаем на ссылки.

Но когда я вручную перезагружаю страницу браузера, она работает только для путей: /, / test1 и / test2

Перезагрузка страницы не работает для пути / test3 / options, / test4 / data /: id (например, / test4 / data / 4) и / list /: page (например:/ list / 3)

Моя конфигурация dev-сервера:

devServer: {
  liveReload: true,
  stats: "errors-only",
  hot: true,
  historyApiFallback: true
}

Установлена ​​версия DOM для React Router и React Router

"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",

Любая помощь приветствуется.

ОБНОВЛЕНИЕ:

Console Error
Эта ошибка появляется на всех путях, которые не работают при перезагрузке. фактический путь к файлу bundle.min.js должен быть http://localhost:8080/bundle.min.js Я думаю, что проблема здесь

output: {
  path: path.resolve(__dirname, "dist"),
  filename: "bundle.min.js"
},

1 Ответ

0 голосов
/ 03 ноября 2019

Я исправил это. Нашел this на странице сервера разработчика Webpack

и добавил несколько правил, изменил мою конфигурацию сервера разработки webpack

Из этого:

devServer: {
  liveReload: true,
  stats: "errors-only",
  hot: true,
  historyApiFallback: true
}

К этому:

devServer: {
  liveReload: true,
  stats: "errors-only",
  hot: true,
  historyApiFallback: {
    rewrites: [
      { from: /\/(bundle.min.js$)/, to: 'http://localhost:8080/bundle.min.js' },
      { from: /http:\/\/localhost:8080\/*/, to: 'http://localhost:8080' }
    ]
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...