在 netlify 中捕获 create-react-app 的所有重定向
Catch all redirect for create-react-app in netlify
我使用 create-react-app 构建并托管在 netlify。
在此 link 中提到我需要为 SPA 编写重定向规则。
/* /index.html 200
但是重定向到 index.html 不起作用，因为没有使用 URL 呈现视图。
我也试过重定向到 / like
[[redirects]]
from = "/*"
to = "/"
但这也不起作用。
如何为 create-react-app 做一个包罗万象的重定向？
要捕获所有重定向，请使用 _redirects 文件中的 /* /index.html 200。
根据 netlify 文档，_redirects 文件应该在您的构建根目录中。
create-react-app 默认在名为 build
的文件夹下创建所有构建文件
所以只需修改package.json中的build scripts，在构建应用程序后将_redirects添加到构建文件夹中。
示例。
"scripts": {
....
"build": "react-scripts build && echo '/* /index.html 200' | cat >build/_redirects ",
...
}
如果您有多个重定向以简化操作，您可以在 CRA
的根 (/) 文件夹中创建一个包含所有重定向的 _redirects 文件
那么在package.json会变成
"scripts": {
....
"build": "react-scripts build && cp _redirects build/_redirects",
...
}
确保你的 netlify 中的构建命令是 yarn run build 或 npm run build
在 package.json 中进行更改后，只需重新构建您的代码。
更新：更好的方法
在 CRA（创建 React App）中，构建脚本将 public 目录中的每个文件复制到构建文件夹，因此只需将 _redirects 与规则放在public 目录，无需更改任何内容，您就可以开始了。
有两 (2) 种方法可以创建 redirects when hosting on Netlify。
_redirects 文件位于 publish 目录的根目录（/build 在 CRA 中）[[redirects]] 列表在存储库（项目）根部的 netlify.toml 配置文件中
/public/_redirects（选项 1）
将_redirects放入/public目录。当 运行 构建命令时，CRA 会将 /public 中的所有文件复制到构建目录。
/public/_redirects
/* /index.html 200
/netlify.toml（选项 2）
将 netlify.toml 放在要部署到 Netlify 的项目（存储库）的根目录 (/) 中。如果 netlify.toml 已经存在，您可以将重定向行添加到末尾。
/netlify.toml
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false
注意： 这些选项可以组合，但请记住 _redirects 将覆盖具有相同来源的条目（ from) netlify.toml 中的路径。
您还可以使用 redirects playground 将一种格式转换为另一种格式。
我使用 create-react-app 构建并托管在 netlify。
在此 link 中提到我需要为 SPA 编写重定向规则。
/* /index.html 200
但是重定向到 index.html 不起作用，因为没有使用 URL 呈现视图。
我也试过重定向到 / like
[[redirects]]
from = "/*"
to = "/"
但这也不起作用。
如何为 create-react-app 做一个包罗万象的重定向？
要捕获所有重定向，请使用 _redirects 文件中的 /* /index.html 200。
根据 netlify 文档，_redirects 文件应该在您的构建根目录中。
create-react-app 默认在名为 build
所以只需修改package.json中的build scripts，在构建应用程序后将_redirects添加到构建文件夹中。
示例。
"scripts": {
....
"build": "react-scripts build && echo '/* /index.html 200' | cat >build/_redirects ",
...
}
如果您有多个重定向以简化操作，您可以在 CRA
的根 (/) 文件夹中创建一个包含所有重定向的 _redirects 文件
那么在package.json会变成
"scripts": {
....
"build": "react-scripts build && cp _redirects build/_redirects",
...
}
确保你的 netlify 中的构建命令是 yarn run build 或 npm run build
在 package.json 中进行更改后，只需重新构建您的代码。
更新：更好的方法
在 CRA（创建 React App）中，构建脚本将 public 目录中的每个文件复制到构建文件夹，因此只需将 _redirects 与规则放在public 目录，无需更改任何内容，您就可以开始了。
有两 (2) 种方法可以创建 redirects when hosting on Netlify。
_redirects文件位于publish目录的根目录（/build在 CRA 中）[[redirects]]列表在存储库（项目）根部的netlify.toml配置文件中
/public/_redirects（选项 1）
将_redirects放入/public目录。当 运行 构建命令时，CRA 会将 /public 中的所有文件复制到构建目录。
/public/_redirects
/* /index.html 200
/netlify.toml（选项 2）
将 netlify.toml 放在要部署到 Netlify 的项目（存储库）的根目录 (/) 中。如果 netlify.toml 已经存在，您可以将重定向行添加到末尾。
/netlify.toml
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false
注意： 这些选项可以组合，但请记住 _redirects 将覆盖具有相同来源的条目（ from) netlify.toml 中的路径。
您还可以使用 redirects playground 将一种格式转换为另一种格式。