React-маршрутизатор с 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 "(как в моем routes.jsx и после запуска WebPack-DEV-сервер)

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

я

"не может получить/SRC/клиент/дома".

Answer 1

Первое, что вы упоминали в своих маршрутах как домашний компонент, чтобы иметь путь /home. Поэтому вам нужно посетить http://localhost:8080/home. Также, если вы попытаетесь напрямую получить доступ к этому URL-адресу, он даст вам эту ошибку, так как вы используете browserHistory. Если вы хотите, вы можете использовать hashHistory или HashRouter в response-router v4, и в этом случае вам нужно будет посетить http://localhost:8080/#/home. Если вы хотите продолжать использовать browserHistory или BrowserRouter как в реакции маршрутизаторами v4, то вам нужно будет добавить в historyApiFallback: true вы 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

Вы должны добавить это в настройках WebPack:

devServer: { 
    historyApiFallback: true, 
}, 

и запустить сервер так:

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

Потому что вы хотите React-Route обрабатывать маршрут вместо вашего сервер. Так что независимо от того, что URL-адрес, он должен идти в index.html.