Question

我正在开发一个React应用程序，目前在http://localhost:3000/提供服务，我希望得到一些基本的路由工作。我一直在松散地关注the Redux guide，但我似乎无法正确设置回退网址。应用指南中描述的webpack更改后，访问http://localhost:3000/test等任何链接会导致404响应和“无法获取/测试”错误。定义路由的index.jsx文件如下所示：

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' }以及index属性值的一些变体。这是完整的配置：

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

任何可能出错的想法？

编辑：还有一些可能相关的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',
  ],
});

Answer 1

使用browserHistory时，您必须正确配置server以便在所有routed路径上投放：

https://github.com/ReactTraining/react-router/blob/v2.0.0-rc5/docs/guides/basics/Histories.md#configuring-your-server

但是如果你不想再加上快速服务器来进行热重装工作，请使用：

webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors

Answer 2

虽然我无法让browserHistory在我的本地开发环境中工作，但切换到hashHistory对于短期来说是一个足够好的解决方案。

Answer 3

服务器必须返回主反应页面，并且react将执行生根，如果您在IIS上托管您的反应应用程序，只需添加包含以下内容的web.config文件：

model.readInFirebaseData { (success) in
    print("data read in")
    dataArray = model.firebaseDataArray 

    DispatchQueue.main.async {
        activityIndicatorView.stopAnimating()
        self.tableView.reloadData()
    }
}

这将告诉IIS服务器返回主索引页而不是404错误，并且不需要使用哈希历史记录。

尽管为webpack-dev-server将historyApiFallback设置为true，但仍在我的React应用程序中接收404s

3 个答案: