在Netlify中为create-react-app设置全捕获重定向

Question

25

我的网站是使用create-react-app构建的，并托管在netlify上。

在这个链接中提到，我需要为单页应用编写重定向规则。

/*    /index.html   200

但是重定向到 index.html 不起作用，因为该URL没有渲染视图。我还尝试了将重定向地址设置为/，如下:

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

但这也无法正常工作。

如何为 create-react-app 进行一个全局的重定向？

- Sooraj

3个回答

27

有两种方法可以在Netlify上创建重定向。

`/public/_redirects`（选项1）

将_redirects放入/public目录中。当运行构建命令时，CRA将复制/public中的所有文件到构建目录中。

/public/_redirects

/* /index.html  200

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

/netlify.toml

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

注意：这些选项可以组合使用，但请记住，_redirects将覆盖netlify.toml中相同源（from）路径的条目。

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

- talves

0

我在我的网站中实现这一点的主要方法是将其放在_redirects文件中。

以下是文件中应该包含的内容：

/* /index.html 200

这应该放置在react-project-name/public/目录中，或者出现在公共可访问文件中的目录（例如：我的网站_redirects，尽管它看不到，但它确实存在）。

确保在您的Netlify构建设置中，将构建目录设置为正确的目录（您的项目，应该是package.json所在的位置）。

_redirects文件允许Netlify通过index.html文件路由所有导航，而不是尝试加载不同的“页面”。由于React技术上是一个单页面应用程序，它只使用一个HTML文件（index.html）。来自路径名的流量被发送到index.html文件。

没有_redirects文件，如果你在网站的子目录中，你将无法刷新页面。这将导致Netlify显示"页面未找到"的错误。子目录的示例是cadenmf.com/defs/frontend-developer。

- Caden Finkelstein

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- saurabh · Accepted Answer

要捕获所有重定向，请在_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（Create React App）中，构建脚本会将public目录中的每个文件复制到构建文件夹中，因此只需将带有规则的_redirects放入public目录中而无需进行任何更改即可。