鍍金池/ 問答/HTML5/ react-router-dom路由問題,配置了historyApiFallba

react-router-dom路由問題,配置了historyApiFallback但是還是請求到后端了報404錯誤。

我在webpack中配置了historyApiFallback,但是地址訪問類似/a/b已經定義的路由請求到后端了。請求類似/cc這種我定義的地址就會渲染定義的錯誤頁面。
webpack.config.js


'use strict'
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = {

mode:'development',
entry: './src/app.js',
output: {
    path: path.resolve(__dirname, 'dist')
},
devServer: {
    port: '8088', //設置端口號
    historyApiFallback: true
},
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options:{
                    presets : ['env', 'react']
                }
            }
        }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
        template: './src/template/index.html',
        filename: 'index.html'
    })
]

}

module.exports = config

app.js


import React from 'react'
import ReactDom from 'react-dom'
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'

class A extends React.Component {

render() {
    return (
        <h1>
            A
        </h1>
    )
}

}

class B extends React.Component {

render() {
    return (
        <h1>
            B
        </h1>
    )
}

}

class C extends React.Component {

render() {
    return (
        <h1>
            C
        </h1>
    )
}

}

class ErrorPage extends React.Component {

render() {
    return (
        <h1>
            ErrorPage
        </h1>
    )
}

}

class App extends React.Component {

render() {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={A}/>
                <Route path="/b" component={B}/>
                <Route path="/c" component={C}/>
                <Route path="/a/c" component={C}/>
                <Route component={ErrorPage}/>
            </Switch>
        </Router>
    )
}

}

ReactDom.render(

<App/>,
document.querySelector('#app')

)

訪問http://localhost:8088/aa路由中未定義,會渲染ErrorPage
訪問http://localhost:8088/a/c報如下錯
GET http://localhost:8088/a/main.js 404 (Not Found)
Refused to execute script from 'http://localhost:8088/a/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
不知道哪里錯了,各種搜索??磜ebpack的文檔,然而并沒解決掉問題。求大神指教?。?!
不知道問題出在哪里了,我把所用的依賴版本信息也貼出來。
"devDependencies": {

"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.3",
"webpack-dev-server": "^3.1.4"

},
"dependencies": {

"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-router-dom": "^4.3.1"

}

回答
編輯回答
傻丟丟

import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
改為:
import {HashRouter as Router, Route, Switch} from 'react-router-dom'
可以正常運行。
你如果不想訪問到后端,應該使用HashRouter

2017年1月4日 21:14