使用webpack 3.8在反应路由器4.2中刷新后无法获取/关注页面

时间:2017-12-07 07:50:13

标签: reactjs react-router browser-history

onclick路由非常完美,但在刷新页面上找不到错误。我正在使用react router 4.2和webpack 3.8。当我要在仪表板上关于我们组件时,它是正确的路由,但是当我们刷新该页面时,会出现错误,无法获得aboutus页面。 这是我的webpack.config.js

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 + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: '/'
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true
  },
  plugins: [
  new webpack.ProvidePlugin({ 
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery' 
  })
  ],
  watch: true,
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  },
};

module.exports = config;

我的package.json是

{
  "name": "react-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "dev": "webpack -d --progress --colors --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^3.3.7",
    "create-react-class": "^15.6.2",
    "jquery": "^3.2.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "webpack": "^3.8.1"
  }
}

这是我的index.jsx组件。

import AwesomeComponent from './awesomecomponent.jsx';
import Dashboard from './dashboard.jsx';
import App from './app.jsx';
import AboutUs from'./aboutus.jsx';
import React from 'react';
import {render} from 'react-dom';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Prompt, Switch} from 'react-router-dom'

ReactDOM.render((
  <Router>
    <Switch>
        <Route exact path='/' component={Dashboard} />
        <Dashboard>
            <Route path='/aboutus' component={AboutUs} />
        </Dashboard>
        <Route path='/awesomecomponent' component={AwesomeComponent} />
    </Switch>
  </Router>
), document.getElementById('app'))

我不明白,我做错了什么?或者我错过了什么? 请帮帮我。

1 个答案:

答案 0 :(得分:0)

将contentBase用作&#39;。&#39;不是&#39; ./'。然后重新运行start和dev命令。