自从上次把基础环境搭建好之后,开始进行开发页面,结果进入通过手动在浏览器地址栏输入网址时出现了个路由错误:
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 any404
responses. EnabledevServer.historyApiFallback
by setting it totrue
Ok,问题已经解决。
相关文章:
132.【前端】webpack 搭建 React 应用环境(一)
13.【前端】webpack 代码分片
11.【前端】webpack模块打包
10.【前端】webpack 安装