Question

我有一个webpack，react，flux，反应路由器设置。我有这两条路线：

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={Photos} onEnter={someAuthCheck}>
      <Route path="/login" component={Login}></Route>
    </Route>
  </Router>
),document.getElementById('app'));

当我在浏览器中写http://localhost:8080/login时，我得到：

Cannot GET /login

而不是我的登录对话框我在webpack dev服务器上运行。我做得不对劲？

我的webpack配置：

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  resolve: {
    alias: {
      jquery: "jquery/src/jquery"
    }
  },
  entry: {
    main: APP_DIR + '/index.jsx',
  },
  output: {
    publicPath: "/src/client/public/",
    path: BUILD_DIR,
    filename: '[name].js'
  },
  module : {
    loaders : [
      { test : /\.jsx?/, include : APP_DIR, loader : 'babel-loader' },
      { test: /.(woff|woff2|eot|ttf)$/, loader:"url-loader?prefix=font/&limit=5000" },
      {test: /\.(scss|css)$/, loader: ExtractTextPlugin.extract('css-loader!sass-loader')}
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].css"),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
    new HtmlWebpackPlugin({
      title: 'PhotoTank',
      template: 'src/client/app/html-template.ejs',
      filename: '../index.html'
    })
  ],

  devServer: {
    //publicPath: "/src/client/public/",
     //historyApiFallBack: true,
     // progress: true,
     //hot: true,
     //inline: true,
     // https: true,
     //port: 8081,
     contentBase: path.resolve(__dirname, 'src/client'),
     proxy: {
       "/api": {
          target: "http://localhost:5000",
          pathRewrite: {"^/api" : ""}
       }
     }
   },

};

module.exports = config;

Answer 1

您正在使用hashHistory，而不是

http://localhost:8080/login

打开这个：

http://localhost:8080/#/login它会起作用。

From Doc：

哈希历史记录使用URL的哈希（＃）部分创建路由看起来像example.com /＃/ some / path。

阅读hashHistory和browserHistory之间的区别。

Answer 2

通常，如果您遇到Cannot GET错误，则webpack-dev-server会出现问题。来自docs：

要准备，请确保您有一个指向捆绑包的index.html文件。假设output.filename是bundle.js： <script src="/bundle.js"></script>

因此，您必须首先使用webpack生成index.html文件，如果您使用的是样板文件，通常称为npm run build，或者您必须为生产版本创建单独的webpack配置如此。

或者，只需按照上面的说明创建一个空的index.html文件。

您的react-router配置也存在一些问题：

<Route path="/login" component={Login}></Route>

应该是

<Route path="login" component={Login}></Route>

不应该在儿童路线中使用斜杠。

此外，如果您想要访问browserHistory页面，则应使用hashHistory代替/login。

React Router的行为不符合我的要求

2 个答案: