リアクト-ルータBrowserRouter/browserHistoryとをリフレッシュ

Question

上では動作しません、私は次のWebPACKの設定ファイルがあります：私は打ったとき

var webpack = require('webpack'); 
var path = require('path'); 

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

var config = { 
    entry: [ 
     APP_DIR + '/config/routes.jsx', 
     'webpack/hot/dev-server', 
     'webpack-dev-server/client?http://localhost:8080' 
    ], 
    output: { 
    publicPath: 'http://localhost:8080/src/client/public/' 
    }, 
    module : { 
    loaders : [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     include: APP_DIR, 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015'] 
     } 
     }, 
     { 
     test: /\.scss$/, 
     loaders: [ 'style', 'css', 'sass' ] 
     }, 
     { 
     test: /\.json$/, 
     loader: "json-loader" 
    } 
    ] 
    } 
}; 

module.exports = config; 

は私がやろうとしていますすべては、しかし、ローカルホスト上の私のアプリを実行しています： " http://localhost:8080/src/client/home「

import React from 'react'; 

import { Route, Router, browserHistory } from 'react-router'; 
import ReactDOM from 'react-dom'; 

import Wrapper  from './../components/wrapper.jsx'; 
import Home   from './../components/home.jsx'; 
import Projects  from './../components/projects.jsx'; 
import SingleProject from './../components/projectContent/singleProject.jsx'; 
import About   from './../components/aboutUs.jsx' 

ReactDOM.render((
    <Router history={browserHistory} > 
     <Route path="/" component={Wrapper} > 
      <Route path="home" component={Home} /> 
      <Route path="projects" component={Projects} /> 
      <Route path="projects/:id" component={SingleProject} /> 
      <Route path="about" component={About} /> 
     </Route> 
    </Router> 
), document.getElementById('app')); 

（私のroutes.jsxあたりとのWebPACK-devのサーバーを実行した後のように）私は

取得 "取得することはできません/ SRC /クライアント/ホームを"。あなたのWebPACKの設定でこれを追加する必要が

Answer 1

あなたのルートでホームコンポーネントとして最初に言及したことは、パスが/homeであることです。だからhttp://localhost:8080/homeにアクセスする必要があります。また、このURLに直接アクセスしようとすると、browserHistoryを使用しているため、このエラーが発生します。反応ルータv4でhashHistoryまたはHashRouterを使用したい場合は、http://localhost:8080/#/homeにアクセスする必要があります。あなたが反応し、ルータをV4のようにbrowserHistoryまたはBrowserRouterを引き続き使用したい場合は、あなたの中にhistoryApiFallback: trueを追加する必要があります

var webpack = require('webpack'); 
var path = require('path'); 

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

var config = { 
    entry: [ 
     APP_DIR + '/config/routes.jsx', 
     'webpack/hot/dev-server', 
     'webpack-dev-server/client?http://localhost:8080' 
    ], 
    output: { 
    publicPath: 'http://localhost:8080/src/client/public/' 
    }, 
    devServer: { 
    historyApiFallback: true 
    }, 
    module : { 
    loaders : [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     include: APP_DIR, 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015'] 
     } 
     }, 
     { 
     test: /\.scss$/, 
     loaders: [ 'style', 'css', 'sass' ] 
     }, 
     { 
     test: /\.json$/, 
     loader: "json-loader" 
    } 
    ] 
    } 
}; 

module.exports = config; 

Answer 2

：

devServer: { 
    historyApiFallback: true, 
}, 

そして、このようなあなたのサーバーを起動します。あなたが反応-ルートを代わりにあなたのルートを処理したいので

webpack-dev-server --config webpack.config.js 

サーバ。したがって、URLが何であれ、それはindex.htmlに行くべきです。