瞎采新闻 对于单页应用 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
---来自腾讯云社区的---love丁酥酥
微信扫一扫打赏 
支付宝扫一扫打赏