React-router v4 - не может GET * url *

Я начал использовать реактивный маршрутизатор v4. У меня есть простой <Router> в моем app.js с некоторыми ссылками навигации (см. Код ниже). Если я перейду к localhost/vocabulary, маршрутизатор перенаправит меня на нужную страницу. Однако, когда я нажимаю reload (F5) после этого (localhost/vocabulary), все содержимое исчезает и отчет обозревателя Cannot GET/vocabulary. Как это возможно? Может ли кто-нибудь дать мне понять, как это решить (правильно загрузите страницу)?

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)

Ответ 1

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

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

Я написал об этом подробнее - Исправлена ошибка "не может GET/URL" при обновлении с помощью React Router (или как работают маршрутизаторы на стороне клиента)

Ответ 2

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

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

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

Ответ 3

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

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

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

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

404s вернется в /index.html

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Если вы используете 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)
    }
  })
})

Ответ 7

У меня была такая же проблема, но я исправил ее после остановки и запуска webpack.

Ответ 8

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

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

Ответ 9

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

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

  devServer: {
    historyApiFallback: true
  },