放上一个测试用的 React 小专案到 Netlify,在 local 执行正常,在网页上点选连结也正常,但如 果把连结记下来传给别人或直接重新整理页面都会变在 404
建立专案使用的是大家都在用的 Create React App,Router 用的是大家都在用的 React Router,好像不应该有问题才对
查了一下,React Router 分为 BrowserRouter 和 HashRouter 两种,这篇文章不再说明两者之间的不同,可以参考 这个讨论串
两者呈现的差别在 HashRouter 在 URL 上多了一个「#」,原来使用的是 BrowserRouter
解决方法一
将 BrowserRouter 换成 HashRouter 问题就解决了,但是 URL 变的比较丑,多了个「#」,像是内部使用的网站,做为公开网站的话看起来就有点不顺眼
解决方法二
参考 Create React App 的 Deploy 说明:说明连结
在 public 目录下新增一个档案 _redirects, 档案只需要有一行就可以
/* /index.html 200
重新 build 专案 deploy 到 Netlify 后,原来会 404 的问题解决