带有浏览器路由器/浏览器历史记录在刷新时不起作用

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"(根据我的路由)。JSX和运行webpack-dev-server后)

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

我得到

"Cannot GET/src/client/home".

Answer 1

你在路由中提到的第一件事是home组件要有路径/home。所以你需要访问http://localhost:8080/home。此外，如果你试图直接访问这个url，它会给你这个错误，因为你正在使用browserHistory。如果您愿意，您可以在react-router v4中使用hashHistory或HashRouter，在这种情况下，您将需要访问http://localhost:8080/#/home。如果你想在react-router v4中继续使用browserHistory或BrowserRouter，那么你需要在webpack

中添加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

你需要在你的webpack设置中添加这个:

devServer: {
  historyApiFallback: true,
}, 

然后像这样启动服务器:

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

因为你想让React-Route来处理路由而不是你的服务器。所以不管url是什么都应该是index。html。