React-router z BrowserRouter/browserHistory nie działa na odświeżeniu

Question

Mam następujący plik WebPack config:

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; 

wszystko staram się zrobić to uruchomić mojej aplikacji na localhost, jednak gdy uderzę " http://localhost:8080/src/client/home "(jak na moje routes.jsx i po uruchomieniu WebPACK-dev-serwer)

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')); 

uzyskać

"Can not get/src/klient/home".

Answer 1

Pierwsza rzecz, o której wspomniałeś w swoich trasach jako komponent macierzysty do ścieżki /home. Musisz odwiedzić stronę http://localhost:8080/home. Ponadto, jeśli spróbujesz bezpośrednio uzyskać dostęp do tego adresu URL, pojawi się ten błąd, ponieważ używasz browserHistory. Jeśli chcesz, możesz użyć hashHistory lub HashRouter w routerze reagującym v4, w takim przypadku musisz odwiedzić stronę http://localhost:8080/#/home. Jeśli chcesz nadal korzystać browserHistory lub BrowserRouter jak reagować w routerze-v4, a następnie trzeba będzie dodać historyApiFallback: true w ty 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/' 
    }, 
    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

Trzeba dodać to w ustawieniach WebPACK:

devServer: { 
    historyApiFallback: true, 
}, 

i rozpocząć serwer tak:

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

Ponieważ chcesz React-Route obsługiwać trasę zamiast swojego serwer. Tak więc bez względu na adres URL powinien przejść do strony index.html.