146. 【前端】webpack-搭建-React-应用环境（二）

自从上次把基础环境搭建好之后，开始进行开发页面，结果进入通过手动在浏览器地址栏输入网址时出现了个路由错误：

Cannot Get /system

这里的 /system 是我在页面加的一个路由，代码片段是下面这样的：

<article className={"app-apple"}>
        <header>
            <Link to={"."}>App Apple</Link>
            <Link to={"system"}>System</Link>
            <Link to={"database"}>Database</Link>
        </header>
        <section>
            <Routes>
                <Route path={"system"} element={<System/>}/>
                <Route path={"database"} element={<Database/>}/>
            </Routes>
        </section>
        <footer>
            app-apple: 占位
        </footer>
    </article>

前端使用的是 React 技术栈，路由所用的库是：react-route-dom，使用的路由类型是：BrowserRouter。这个库很好用，由于它最近有版本升级，从 v5 升级到 v6，很多以前的支持的 api 都不能了，有的直接弃用了，有的换了更优质的实现。本来我以为出现的错误是由于 react-route-dom 的版本升级导致的不兼容问题，于是找到官网的版本升级文档——[UPGRADING FROM V5](https://reactrouterdotcom.fly.dev/docs/en/v6/upgrading/v5# upgrading-from-v5)，从头到尾看了一遍，最后找到原因是 webpack 的配置导致的。

在 webpack.config.js 配置文件里需要加上下面这段以支持 BroserRouter。

module.exports = {
    //...
    devServer: {
        //...
        historyApiFallback: true
        //...
    }
}

在 webpack 官网也明确说明了这个配置：

When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true

Ok，问题已经解决。
相关文章：
132.【前端】webpack 搭建 React 应用环境（一）
13.【前端】webpack 代码分片
11.【前端】webpack模块打包
10.【前端】webpack 安装