在netlify中

时间:2019-05-05 09:17:57

标签: reactjs create-react-app netlify

我使用create-react-app构建并托管在netlify中。

在此link中,提到需要为SPA编写重定向规则。

/*    /index.html   200

但是重定向到index.html无效,因为没有使用该URL呈现视图。 我也尝试过重定向到/,例如

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

但是这也不起作用。

如何为create-react-app进行全面重定向?

2 个答案:

答案 0 :(得分:3)

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

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

create-react-app默认在名为build的文件夹

下创建所有构建文件。

因此,只需在构建应用程序后修改build scripts中的package.json以在构建文件夹中添加_redirects

示例。

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

确保netlify中的build命令为yarn run buildnpm run build

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

答案 1 :(得分:0)

有两种(2)方式创建redirects when hosting on Netlify

  • _redirects文件位于publish目录的根目录(CRA中的/build
  • 在存储库(项目)根目录的[[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会覆盖{{1 }}。

您还可以使用redirects playground将一种格式转换为另一种格式。