在netlify中为create-react-app捕获所有重定向

Question

我有一个内置使用create-react-app并托管在中netlify。

在此链接中，提到我需要为SPA编写重定向规则。

/*    /index.html   200

但是重定向到index.html是行不通的，因为没有使用该URL呈现任何视图。我也尝试过重定向到/喜欢

[[redirects]]
  from = "/*"
  to = "/"

但这也不起作用。

我该如何进行全面重定向create-react-app？

Answer 1

在 Netlify 上托管时，有两 (2) 种方法可以创建重定向。

• _redirectspublish目录根目录中的文件（/build在 CRA 中）
• [[redirects]]在netlify.toml存储库（项目）根目录的配置文件中列出

/public/_redirects （选项1）

把_redirects在/public目录中。/public运行构建命令时，CRA 会将所有文件复制到构建目录中。

/public/_redirects

/* /index.html  200

/netlify.toml （选项 2）

将 放在要部署到 Netlify 的项目（存储库）netlify.toml的根 ( /) 目录中。如果重定向行netlify.toml已经存在，您可以将重定向行添加到它的末尾。

/netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  force = false

注意：这些选项可以组合使用，但请记住，它们_redirects将覆盖netlify.toml.

您还可以使用重定向游乐场从一种格式转换为另一种格式。

Answer 2

要捕获所有重定向，请/* /index.html 200在_redirects文件中使用。

根据netlify文档，该_redirects文件应位于您的根构建目录中。

默认情况下，create-react-app将在名为的文件夹下创建所有构建文件 build

因此，只需在构建应用后修改build scriptsin package.json即可将in 添加_redirects到build文件夹中。

例。

"scripts": {
  ....
  "build": "react-scripts build && echo '/* /index.html  200' | cat >build/_redirects ",
  ...
}

如果您有多个重定向来简化操作，则可以在CRA的_redirectsroot（/）文件夹中创建一个所有重定向的文件

然后在package.json意志成为

"scripts": {
  ....
  "build": "react-scripts build && cp _redirects build/_redirects",
  ...
}

确保您的netlify中的build命令是yarn run build 或npm run build

进行更改后，package.json只需重新构建代码即可。

更新：更好的方法

在CRA（Create React App）中，构建脚本会将公共目录中的每个文件都复制到构建文件夹中，因此只需将_redirects和规则放入公共目录中，而无需进行任何更改即可。