路由在重新加载时出错

Question

所以我的路由与 redux 一起工作，但我在其中一个路由中重新加载时遇到问题。

app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import store , { history } from './store';

import Connect from './components/Connect';
import PhotoList from './components/PhotoList';
import PhotoContent from './components/PhotoContent';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={Connect}>
        <IndexRoute component={PhotoList}></IndexRoute>
        <Route path="view/:id" component={PhotoContent}></Route>
      </Route>
    </Router>
  </Provider>,
  document.getElementById("app")
);

webpack.config.js:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/app.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "app.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

这是我的代码，history = syncHistoryWithStore(store, browserHistory)。然后我尝试在其中一个 view/:id 中重新加载页面，我收到错误：

GET http://localhost:8080/view/app.min.js

你们知道为什么会这样吗？任何帮助都是 appreciated.Thanks!

I 运行命令行中的 webpack 服务器：

webpack-dev-server --content-base src --inline --hot --history-api-fallback

Answer 1

确保您的 index.html 引用了正确的包文件。

对于 webpack，确保你的配置使用这个：

config.devServer = {
    ...
    contentBase: 'src',
    historyApiFallback: true,
    ...
};

或者，如果您将其声明为单个对象：

{
    ...
    devServer: {
       ...
       contentBase: 'src',
       historyApiFallback: true
    }
}

它会将您的请求重定向到 / 并让 React 处理它。

运行你的 webpack-dev-server 像这样：./node_modules/.bin/webpack-dev-server --inline --hot

编辑：

在与您聊天时，我注意到您 index.html 中的捆绑包引用不正确。将它移动到 ../app.min.js 修复它。

路由在重新加载时出错

Route giving error on reload

javascript

reactjs

redux

react-router

browser-history