跳到主要内容

如何解决 react-router 在 Netlify 重新整理会 404 问题

· 2 分钟阅读
Eric Cheng

放上一个测试用的 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 的问题解决



版權聲明


這是 google 廣告