5-5 webapck-dev-server 解决单页应用路由问题
5-5 webapck-dev-server 解决单页应用路由问题
1. 简介
对于单页应用 spa，大家应该都不陌生了。本节主要介绍 webpack-dev-server 如何解决 spa 遇到的路由问题。
2. 准备一个 spa
我们首先准备一个 spa：
// src/home.js
import React, { Component } from 'react';
class Home extends Component {
render() {
return <div>home</div>
}
}
export default Home;// src/list.js
import React, { Component } from 'react';
class List extends Component {
render() {
return <div>List</div>
}
}
export default List;下载路由模块，npm i react-router-dom -S：
// src/index.js
import React, { Component, Fragment } from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './home.jsx';
import List from "./list.jsx";
class App extends Component {
render() {
return(
<BrowserRouter>
<Fragment>
<Route path='/' component={Home}></Route>
<Route path='/list' component={List}></Route>
</Fragment>
</BrowserRouter>
)
}
}
ReactDom.render(<App />, document.getElementById('root'));3. 路由匹配
npm run dev-server 后，如下：
image.png
可以看到，根路径匹配到了 home，我们修改一下访问路径：http://localhost:3000/list
image.png
可以看到，服务器解析的时候，认为用户是要请求服务器下的 list 路径，但是这里并没有任何资源。对于 spa 来讲，我们期望的应该是请求始终指向 index.html, 而后面的路径是用来匹配路由的参数。 我们只需要如下配置即可：
module.exports = {
//...
devServer: {
historyApiFallback: true
}
};这个配置的意思是，当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html。如下：
image.png
我们访问 http://localhost:3000/list 时因为 404 ，所以访问被定向到 index.html，并且 list 作为路由进行匹配。
这里之所以还展示了 home，是因为我们的源代码写法存在一点问题，我们修改一下：
<Fragment>
<Route path='/' exact component={Home}></Route>
<Route path='/list' component={List}></Route>
</Fragment>
image.png
okay，正常了。
4. connect-history-api-fallback
对于 historyApiFallback 的更多配置。我们可以查看 connect-history-api-fallback 比如 rewrites，我们可以指定特定的路由匹配的路径，如下，我们生成一个 404 页面：
<!--src/404.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>esmodule-oop</title>
</head>
<body>
<div>404</div>
</body>
</html>修改 webpack.common.js:
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename:`index.html`
}),
new HtmlWebpackPlugin({
template: "./src/404.html",
filename:`404.html`,
chunks: []
}),
new CleanWebpackPlugin()
]修改 webpack.dev.config.js，
historyApiFallback: {
rewrites: [
{ from: /\/notFound/, to: '/404.html'}
]
},然后我们运行 npm run dev-server，打开页面：
参考
https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback https://www.webpackjs.com/configuration/dev-server/#devserver-historyapifallback https://github.com/bripkens/connect-history-api-fallback
腾讯云开发者
