Я начал использовать реагировать-маршрутизатор В4. У меня все просто <маршрутизатор>
в моем app.js с некоторых навигационных ссылок (см. код ниже). Если я перейдите к локальным localhost/словарь
, маршрутизатор перенаправляет меня на правильную страницу. Однако, когда я нажимаю обновить (F5) потом (локальнымlocalhost/словарь
), все содержимое исчезнет и отчета браузер не может получить /словарь`. Как это возможно? Может кто-то дает мне подсказку, как решить, что (правильно перезагрузить страницу)?
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)
Я'м предполагая, что вы're через Webpack. Если это так, добавив несколько вещей для вашего webpack config должен решить эту проблему. В частности, выход.publicPath = '/'и
солдат.historyApiFallback = правда`. Здесь'ы пример webpack конфигурацию ниже, который использует оба ^ и устраняет проблему обновление для меня. Если вы'вновь любопытно "почему-то", this поможет.
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'
})
]
};
Я писал подробнее об этом здесь - фиксация "и не может сделать /URL-адрес, что" ошибка при обновлении с маршрутизатором реагировать (или как стороны маршрутизаторы работе с клиентами)
Просто дополнить Тайлер'ы ответ для тех, кто еще борется с этим:
Добавление солдат.historyApiFallback: правда на мой webpack конфигурации (без установки
publicPath`) исправлена 404/не может сделать ошибки, я видел при обновлении/назад/вперед, но только на один уровень вложенности маршрут. Иными словами, "/" и " темы" и начал работать нормально, но ничего сверх этого (например, " по - /темы/что-то") еще бросила 404 при обновлении/и т. д.
Просто наткнулся на принятый ответ здесь: https://stackoverflow.com/questions/29718481/unexpected-token-error-in-react-router-component и это при условии, последний недостающий кусочек для меня. Добавление ведущих /
для пакета скриптов src в моей index.html
полностью решить эту проблему.
У меня был тот же вопрос, что исправлено это для меня был редактирования пакет моя.файл JSON
, и под скрипты: {
"build": "webpack -d && copy src\\index.html dist\\index.html /y && webpack-dev-server --content-base src --inline --port 3000"
в конце моего webpack построить
код я добавил - история-АФИ-резервный
это казалось самым простым решением, чтобы не сделать ошибки /URL-адрес`
Примечание: в следующий раз, когда вы строите после добавления - история-АФИ-резервный
вы увидите в выходных данных, выглядит следующим образом (с тем, что ваш файл индекса):
404s будет откат к /index.html
Я также имел успех с этим, добавив ... historyApiFallback: правда
devServer: {
contentBase: path.join(__dirname, "public"),
watchContentBase: true,
publicPath: "/dist/",
historyApiFallback: true
}
Если приложение размещается на статический файл-сервера, вы должны использовать
import { HashRouter } from 'react-router-dom'
ReactDOM.render((
<HashRouter>
<App />
</HashRouter>
), holder)
Если вы используете Экспресс (не 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)
}
})
})