webpack解决单页面路由问题
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html template</title> </head> <body> <div id='root'></div> </body> </html>
index.js
import React, {Component} from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import ReactDom from 'react-dom';
import Home from './home';
import List from './list';
class App extends Component{
render() {
return (
<BrowserRouter>
<div>
<Route path='/' exact component={Home} />
<Route path='/list' component={List} />
</div>
</BrowserRouter>
)
}
}
ReactDom.render(<App/>, document.getElementById('root'));
home.js
import React, {Component} from 'react';
class Home extends Component{
render() {
return (
<div>home</div>
)
}
}
export default Home;
list.js
import React, {Component} from 'react';
class List extends Component{
render() {
return (
<div>list</div>
)
}
}
export default List;
我们运行npm run dev ("webpack-dev-server --config ./build/webpack.common.js")。访问localhost:8080/访问没有问题，访问localhost:8080/list说找不到这个页面，这是为什么。
原因是当你这么去访问一个网址的时候，后端，也就是现在的webpackDevServer会因为访问的是后端的一个list页面。但是我们dist下只有index.html，并没有list这个页面。所以提示页面不存在，这是前端做单页应用的时候经常会遇到的一个问题。在webpackDevServer里面要解决这个问题，打开webpack官网。https://webpack.js.org/configuration/dev-server#devserverhistoryapifallback
我们这里只要配置一个historyApiFallback就可以了
module.exports = { devServer: { historyApiFallback: true } };
这样我们重新访问localhost:8080/list的时候就没有问题了。他的原理是后端服务器如果发现并没有这个/list地址。就会偷摸的转化成根路径的请求，所以不管请求什么地址，都会请求index.html，里面有main.js，也就是我们的业务代码，这里面的路由就能正常的生效。
这里面还可以有其他的配置
historyApiFallback: { rewrites: [ { from: /abc.html/, to: '/index.html' }, ] },
这里面如果访问的是abc.html的时候，转化成index.html。所以这里填一个true，等价于from任何路劲，都to到index.html上。
