React Router 的行为不像我希望的那样答案

【问题标题】：React Router not behaving as I would like it toReact Router 的行为不像我希望的那样
【发布时间】：2017-07-05 04:45:53
【问题描述】：

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

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 开发服务器上运行。我做错了什么？

我的 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;

【问题讨论】：

标签： reactjs webpack react-router

【解决方案1】：

通常，如果您遇到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>

子路由中不应有斜线。

此外，如果您想访问位于/login 的页面，您应该使用browserHistory 而不是hashHistory。

【讨论】：

关于404错误：具体需要将historyApiFallBack选项设置为true。

【解决方案2】：

你使用的是hashHistory，所以不是

http://localhost:8080/login

打开这个：

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

From Doc:

哈希历史使用 URL 的哈希 (#) 部分，创建路由看起来像 example.com/#/some/path。

阅读 hashHistory 和 browserHistory 的区别。

【讨论】：