Я разрабатываю приложение React, которое в настоящее время обслуживается http://localhost:3000/, и я надеялся, что на нем будет работать базовая маршрутизация. Я слабо придерживался the Redux guide, однако я не могу правильно настроить резервный URL. После применения изменений webpack, описанных в руководстве, доступ к любой ссылке, такой как http://localhost:3000/test, приводит к ответу 404 и ошибке «Can not GET/test». Index.jsx файл, который определяет маршрут выглядит следующим образом:Получение 404s в моем приложении React несмотря на установку historyApiFallback для true для webpack-dev-сервера
index.jsx
import 'babel-polyfill';
import React from 'react';
import { Router, Route, browserHistory } from 'react-router';
import { createStore, applyMiddleware, compose } from 'redux';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import App from './components/App';
import rootReducer from './reducers/';
/* eslint-disable no-underscore-dangle */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
/* eslint-enable */
const store = createStore(rootReducer, {}, composeEnhancers(
applyMiddleware(thunkMiddleware),
));
if (module.hot) {
module.hot.accept();
}
render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/(:filter)" component={App} />
</Router>
</Provider>,
document.getElementById('root'),
);
В WebPack конфигурации я попытался с помощью historyApiFallback: true, а также historyApiFallback: { index: 'index.html' } и несколько вариантов для значения свойства индекса. Это полная конфигурация:
webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
debug: true,
devtool: '#eval-source-map',
context: path.join(__dirname, 'src'),
resolve: {
root: path.resolve('./src'),
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx'],
},
devServer: {
historyApiFallback: {
index: '/',
},
},
entry: [
'webpack/hot/dev-server',
'webpack-hot-middleware/client',
'./index',
],
output: {
path: path.join(__dirname, 'src'),
publicPath: '/',
filename: 'bundle.js',
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
],
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'] },
],
},
};
Любые идеи для того, что может быть неправильно?
Edit: Там также некоторые конфигурации BrowserSync которые могут быть связаны:
app.js
/**
* Require Browsersync along with webpack and middleware for it
*/
var browserSync = require('browser-sync');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
/**
* Require ./webpack.config.js and make a bundler from it
*/
var webpackConfig = require('./webpack.config');
var bundler = webpack(webpackConfig);
/**
* Run Browsersync and use middleware for Hot Module Replacement
*/
browserSync({
server: {
baseDir: 'src',
middleware: [
webpackDevMiddleware(bundler, {
// IMPORTANT: dev middleware can't access config, so we should
// provide publicPath by ourselves
publicPath: webpackConfig.output.publicPath,
// pretty colored output
stats: { colors: true },
// for other settings see
// http://webpack.github.io/docs/webpack-dev-middleware.html
}),
// bundler should be the same as above
webpackHotMiddleware(bundler),
],
},
// no need to watch '*.js' here, webpack will take care of it for us,
// including full page reloads if HMR won't work
files: [
'src/css/*.css',
'src/*.html',
],
});
Разве это не то, что стремится к настройке historyApiFallback? https://webpack.gitub.io/docs/webpack-dev-server.html#the-historyapifallback-option Единственное различие, которое я вижу между тем, что я пытаюсь и предлагаемым исправлением, заключается в том, что я внесение изменений в файл webpack.config.js, тогда как исправление использует параметр командной строки. – Sheraz
Я думаю, что они такие же. –