React Router配置动态路由传参时访问/edit/:id出现bundle.js加载失败问题

核心问题排查与修复 #

当前同时存在两处配置疏漏，直接导致了路由匹配失效、静态资源加载失败的现象，逐点修复即可恢复正常：

• 路由匹配规则配置错误
  你当前的动态路由写为path="edit/:id"，缺少根路径前缀的/，react-router对这类相对路径写法无法正确匹配，既匹配不到/edit/12的访问路径，也自然无法解析到:id的路由参数。
  修正为标准根路径开头的写法即可：path="/edit/:id"
• 静态资源路径解析偏差
  当访问/edit/12这类二级路径时，如果入口HTML里的bundle.js是按相对路径引入的，浏览器会顺着当前页面的路径层级，去请求/edit/bundle.js，而非项目根目录下的静态资源，最终触发net::ERR_ABORTED报错。
  对应修复方案：
  • 本地webpack-dev-server开发环境下，在webpack配置的output节点新增publicPath: '/'，强制所有静态资源从根路径加载
  • 检查入口HTML的脚本引入标签，将原本可能的相对路径写法<script src="./bundle.js"></script>，替换为根路径绝对写法<script src="/bundle.js"></script>

修正后的完整路由参考代码 #

import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Dashboard from '../components/Dashboard'
import AddExpense from '../components/AddExpense'
import EditExpense from '../components/EditExpense'
import Help from '../components/Help'
import PageNotFound from '../components/PageNotFound'

export default function AppRouter() {
    return (
        <Router>
            <Switch>
                <Route  path="/" component={Dashboard}  exact />
                <Route  path="/create" component={AddExpense} />
                <Route  path="/edit/:id" component={EditExpense} />
                <Route  path="/help" component={Help} />
                <Route  component={PageNotFound} />
            </Switch>
        </Router>
    )
}

补充提示：如果修复路由匹配规则后仍无法读取id值，可根据使用的react-router版本取值：v5版本通过路由组件props里的match.params.id获取；v6版本在函数组件内调用useParams() Hook读取id参数即可。

内容的提问来源于stack exchange，提问作者Riaz Khan