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'))
我不明白,我做错了什么?或者我错过了什么? 请帮帮我。
答案 0 :(得分:0)
将contentBase用作&#39;。&#39;不是&#39; ./'。然后重新运行start和dev命令。