Tepki-yönlendirici BrowserRouter/browserHistory ile yenileme

Question

çalışmıyor Aşağıdaki webpack yapılandırma dosyası vardır: Ben vurduğunda

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; 

ben yapmaya çalışıyorum hepsi ancak localhost benim app çalıştırılır: " http://localhost:8080/src/client/home "GET Can not/src/müşteriye/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')); 

(benim routes.jsx uyarınca ve webpack-dev-sunucu çalıştırdıktan sonra) ben

olsun".

devServer: { 
    historyApiFallback: true, 
}, 

Ve böyle sunucusunu başlatmak:

Answer 1

Rotanızda belirteceğiniz ilk şey yolun /home yoluna sahip olması. Yani http://localhost:8080/home'u ziyaret etmeniz gerekiyor. Ayrıca, bu URL'ye doğrudan erişmeyi denerseniz, browserHistory'u kullandığınızdan bu hatayı size verir. İsterseniz, hashHistory veya HashRouter'u reaktif-yönlendirici v4'te kullanabilirsiniz, bu durumda http://localhost:8080/#/home'u ziyaret etmeniz gerekecektir. Tepki-yönlendirici v4 gibi browserHistory veya BrowserRouter kullanmaya devam etmek isterseniz

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

Sen webpack ayarlarında bu eklemeniz gerekir Eğer Tepki-Rota yerine rotayı işlemek istiyoruz

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

senin sunucusu. Yani url ne olursa olsun, index.html'ye gitmelidir.