React部署后<Link>未更新至新基础URL的问题排查与解决

我正在学习React，已将React网页部署到在线测试服务器，且能与Heroku上的Strapi后端正常通信。但所有用<Link to=>设置的链接仍指向根路径，和localhost:3000环境下的表现一致，没有带上部署的子目录路径。

已尝试的操作 #

• 修改主HTML文件中的base标签为 <base href="/directoryname/">
• 调整Route配置：<Route path="/directoryname/contact" element={<Contact/>} />
• 在package.json中添加"homepage"参数："homepage": "http://www.example.com/directoryname",

尝试以上操作后问题仍未解决，不清楚遗漏了什么环节。

最终解决方法（供同问题用户参考） #

1. 修正路由基础路径配置
   使用<BrowserRouter basename="/directoryname">来设置路由的基础路径，同时把主HTML文件中的<base href>改回"/"，这一步解决了<Link>链接指向错误的问题。

2. 修复直接URL访问的404问题
   在项目根目录添加.htaccess文件，内容如下：

RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /directoryname/index.html [L]

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