React与Webpack中的路由问题

时间:2017-05-17 23:14:07

标签: reactjs webpack routes

我在我的应用中路由如下:

render(
  <Provider store={store}>
      <Router history={browserHistory }>
        <Route path={"/" component={TopContainer}>
            <IndexRoute component={Login} />
            <Route path='main' component={Maintainer} />    
        </Route>
    </Router>
  </Provider>,
  document.getElementById('root')
)

然后我直接在我的web根目录下部署我的生产bundle.js和index.html(ubuntu中的apache)。 我可以在http://...com/访问我的应用 问题是主页加载路径后

<Route path='main' component={Maintainer} />    

浏览器位置中的内容变为:http://...com/main

此时,如果我使用url(http://...com/main)重新加载页面,我找不到页面错误:“在此服务器上找不到请求的URL / main。”

这是我的webpack.production.config.js

var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

loaders.push({
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract({fallback: 'style-loader', use : 'css-loader?sourceMap&localIdentName=[local]___[hash:base64:5]!sass-loader?outputStyle=expanded'}),
  exclude: ['node_modules']
});

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    publicPath: './',       
    path: path.join(__dirname, 'public'),
    filename: '[chunkhash].js'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders
  },
  plugins: [
    new WebpackCleanupPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: true,
        drop_console: true,
        drop_debugger: true
      }
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new ExtractTextPlugin({
      filename: 'style.css',
      allChunks: true
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
      files: {
        css: ['style.css'],
        js: ['bundle.js'],
      }
    })
  ]
};

但是如果我在本地服务器上运行它,就没有这样的问题:

"use strict";
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "3000";

loaders.push({
  test: /\.scss$/,
  loaders: ['style-loader', 'css-loader?importLoaders=1', 'sass-loader'],
  exclude: ['node_modules']
});

module.exports = {
  entry: [
    'react-hot-loader/patch',
    './src/index.js', // your app's entry point
  ],
  devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
  output: {
    publicPath: '/',
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders
  },
  devServer: {
    contentBase: "./public",
    // do not print bundle build stats
    noInfo: true,
    // enable HMR
    hot: true,
    // embed the webpack-dev-server runtime into the bundle
    inline: true,
    // serve index.html in place of 404 responses to allow HTML5 history
    historyApiFallback: true,
    port: PORT,
    host: HOST
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin({
      filename: 'style.css',
      allChunks: true
    }),
    new DashboardPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html',
      files: {
        css: ['style.css'],
        js: [ "bundle.js"],
      }
    }),
  ]
};

我也在node.js网络服务器上尝试过它并遇到了同样的问题。

contentBase:“。/ public”是吗?

感谢

coolshare

1 个答案:

答案 0 :(得分:0)

根据Vincent的建议,我在Apache配置中添加了一些重定向

    DocumentRoot /var/www

    Redirect permanent /main http://...com/

部分工作:Apache确实将http://...com/main路由到http://...com/

问题是从那时起React接管但是它将它路由到登录屏幕而不是我预期的 - 重新加载浏览器页面时保持在当前屏幕http://...com/main

 “如果您将此URL路由到index.html,那么JS路由器将激活并显示正确的页面。”事实并非如此:我试过

Redirect permanent /main http://...com/index.html

并且Apache无法识别http://...com/index.html

但是Apache

似乎无法将其路由到主页面......