开发者问题收集

React Router DOM 在 Amplify Console AWS 上无法正常工作

2019-08-11
12976
amazon-web-services create-react-app aws-amplify

我已按照其文档在 Amplify Console 上部署了 React 应用程序。该网站已部署并运行良好，我能够使用链接进行导航，但当我尝试直接登陆任何 URL 时，我会被重定向到我配置的 404 页面。

以下是我正在使用的代码 

ReactDOM.render(
  <Router>
    <Route path="/" component={App} />
  </Router>,
  document.getElementById("root"),
);

这是我的路线的样子 - 

<Switch>
    <Route
      exact
      path="/"
      render={(): JSX.Element => <Home auth={this.auth} />}
    />
    <Route path="/features" render={(): JSX.Element => <Features />} />
    <Route
      path="/pagenotfound"
      render={(): JSX.Element => <PageNotFound />}
    />
    <Redirect from="/**" to="/pagenotfound" />
</Switch>

这是应用程序的链接 - https://master.dkf0zemoh330o.amplifyapp.com/features

3个回答

发生这种情况的原因是，直接导航到路径或重新加载路径会在 服务器 上请求该路径，但 React Router 只能控制 客户端 上的路由。

我能够使用 重定向设置 来解决 Amplify 的这一限制，如这两个 GitHub 问题中所述：

从 Amplify 控制台，您可以访问左侧边栏中的 重写和重定向 菜单项。从那里，您可以将重定向规则更新为以下设置： 

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200

这使用他们的正则表达式源功能来匹配有问题的路由并将其重定向到 index.html 。您可能需要用 / 或其他内容替换此默认路由，具体取决于您的应用的结构。它应该是这样的：

在此处输入图像描述

Yasser Shaikh
2019-08-11

谢谢！ 我还会添加 |json| 字符串 - 它修复了“Manifest：行：1，列：1，Chrome 浏览器上的语法错误”问题：

Manifest：行：1，列：1，Chrome 浏览器上的语法错误

VladS
2020-01-10

如果上述步骤不完全有效，请尝试将 <base href="/" /> 添加到 index.html 的 <head/> 部分，如 此处 所述，遗憾的是这花了一段时间才找到。

对于完整的答案，这是我在文本编辑器中打开的最后一个“重写和重定向”： 

[
    {
        "source": "https://example.com",
        "target": "https://www.example.com",
        "status": "302",
        "condition": null
    },
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp|html|xml|webmanifest|mp4)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    },
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]
Daniel Olson
2023-06-06