반응 라우터가 작동하지 않습니다.

웹팩, 반응, 플럭스, 반응 라우터 설정이 있습니다. 내가 브라우저에서 http://localhost:8080/login을 쓸 때반응 라우터가 작동하지 않습니다.

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

내가 얻을 : 나는이 두 경로가

내 로그인 내가 웹팩 dev에 서버에서 실행하고 대화보다는

Cannot GET /login

. 내가 옳지 않은 일은 무엇입니까?

내 웹팩 설정 : 당신은 hashHistory를 사용하는

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>

, 당신은 당신이 어떤 보일러를 사용하는 경우 첫째, 일반적으로 npm run build를라는 index.html 파일을 생성 웹팩 사용해야합니다, 또는 당신은 생산 빌드를 수행 할 수있는 별도의 웹팩 설정을 만들어야합니다 그래서.

또는 위에 설명 된대로 빈 index.html 파일을 만드십시오.

또한 react-router 구성에 몇 가지 문제가 있습니다

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

이

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

어린이 경로에 슬래시 앞이 안해야한다.

또한 /login에 액세스하려는 경우 hashHistory 대신 browserHistory을 사용해야합니다.

출처

2017-02-16 08:21:56

404 오류 : 특히 historyApiFallBack 옵션을 'true'로 설정해야합니다. – csm

, 그래서 대신

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

반응 라우터가 작동하지 않습니다.

답변

관련 문제