如何用React-router-dom Link在新标签页打开本地文件URL？

React Router的<Link>组件是专门用于应用内路由跳转的，它会自动把路径拼接在当前应用的域名（比如localhost:3000）后面，所以没法直接用来打开本地文件。要实现打开本地文件的需求，直接用原生HTML的<a>标签并指定file://协议即可：

<a href={`file://${row}`} target="_blank" rel="noopener noreferrer">{row}</a>

关键注意点： #

• 确保row是完整的本地文件绝对路径，比如你的例子/users/prerak/Desktop/OpenMFRefer/data/message1，拼接后会生成正确的file:///users/prerak/Desktop/OpenMFRefer/data/message1（类Unix系统格式）。
• 现代浏览器出于安全策略，默认会阻止从HTTP网站（比如localhost:3000）打开本地文件。如果遇到无法打开的情况，你需要：
  • 调整浏览器安全设置，允许访问本地文件；
  • 或者用带特定参数的方式启动浏览器，比如Chrome可添加--allow-file-access-from-files参数；
  • 若开发的是Electron这类桌面应用，浏览器的安全限制会宽松很多，无需额外配置。

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