反应路由器没有按照我的意愿

我有一个webpack，反应，助焊剂，反应路由器设置。我有这两条路线：反应路由器没有按照我的意愿

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;

来源

2017-02-16 martin

通常情况下，如果遇到Cannot GET错误，它是webpack-dev-server的问题。从docs：

To prepare, make sure you have a index.html file that points to your bundle. Assuming that output.filename is 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。

来源

2017-02-16 08:21:56

关于404错误：即，'historyApiFallBack'选项需要被设置为TRUE;。 – csm

您使用hashHistory，所以不是

http://localhost:8080/login

开这样的：

http://localhost:8080/#/login它会奏效。

From Doc：

Hash history uses the hash (#) portion of the URL, creating routes that look like example.com/#/some/path.

阅读hashHistory和browserHistory之间的差异。

来源

2017-02-16 08:13:58

反应路由器没有按照我的意愿

回答

相关问题