react-router根路径设置问题

来源：7-5 【路由架构】基础路由及页面导航

天才球员郭敬明

2022-06-13

因为server管理端和app端的配置和以及UI组件风格接近，我使用自己编写的一套webpack配置，devServer中有server和app的区分，在使用react-router时遇到了根路径问题，比如在app端根本无法访问“/app”外的其他路由，devServer配置如下：
图片描述
请问老师，怎么修改配置才可以正常区分app和server，在浏览器正常访问呢？

写回答

1回答

天才球员郭敬明

提问者

2022-06-14

看网上的问题解决基本是围绕devServer的historyApiFallback配置项展开，设置基本的布尔值行不通后，我写错了正则，然后在这种情况下看了半天(╯°□°）╯︵ ┻━┻，最后直接调试了connect-history-api-fallback的代码后才发现写错了。正确配置如下：

historyApiFallback:{
    index:'src/app/index.html',
    rewrites:[
        { from:  /^\/app/, to: '/app/index.html' },
        { from:  /^\/server/, to: '/server/index.html' },
    ]
},

同时router出需要属性basename，写作如下格式：

<Router basename='/app'>……</Router>

React18 系统精讲结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发，获取必备技能

1993 学习 · 1015 问题

查看课程

相似问题

路由配置传入主页参数报错

回答 1

react-router-dom v6

回答 1

react-router-v6如何在普通js中使用useNavigate进行路由跳转

回答 1

关于路由的问题

回答 1

关于dispatch报错的问题

回答 3

打开慕课网App查看更多内容