Router basename配置未生效？路径不匹配问题求助

问题根源 #

你给BrowserRouter配置了basename="/app"，这要求所有可匹配的URL必须以/app开头，但你当前访问的是http://localhost:5173/，路径为/，不符合basename的匹配规则，所以Router无法渲染任何路由，抛出报错。

解决步骤 #

• 直接访问正确路径：在浏览器地址栏输入http://localhost:5173/app，此时路径符合/app前缀要求，根路由/会对应/app/，/game路由对应/app/game，就能正常渲染组件。
• 配置开发服务器默认路径：
  • 若用Vite，在vite.config.js中添加base: '/app/'，重启服务器后，默认访问路径就是http://localhost:5173/app/，打包后的资源也会适配这个基础路径。
  • 若用Create React App，在package.json里添加"homepage": "/app"，启动服务后访问http://localhost:3000/app即可，打包产物也会基于该路径生成。
• 规范内部路由跳转：页面内跳转必须使用React Router提供的<Link>组件，比如<Link to="/">首页</Link>，它会自动拼接basename，生成/app/的跳转路径；不要用原生<a href="/">，否则会直接跳转到根路径/，再次触发匹配错误。

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