使用 react-router-dom 时，Netlify 无法识别 URL 参数

Question

我正在创建一个使用反应路由器的反应应用程序。我正在使用路由器来匹配路径，:/bankName-:credit并且它在本地开发中运行良好。我的应用程序唯一需要的路径是:/bankName-:credit，其他所有路径都会命中404. 但是，当我将此应用程序部署到 netlify 时，默认情况下它会转到/并显示自定义404. 这一切都很好。但是现在如果我尝试去，/hdfc-500那么它会给出一个 netlify not found 消息，说明page not found.

我尝试使用netlify 文档中_redirects提到的方法，但这不起作用。

这是我的路线：-

应用程序.js

<Route path='/:bankCode-:credit' component={NestedRoutes} />
<Route component={NotFound} />

这是我的NestedRoutes组件：-

const NestedRoutes = ({ match }) => (
  <Suspense fallback={<LinearProgress />}>
    <Switch>
      <Route exact path={`${match.path}/sc-generate`} component={SCGenerate} />
      <Route exact path='/:bankCode-:credit' component={Home} />
      <Route component={NotFound} />
    </Switch>
  </Suspense>
)

我在我的_redirects文件中使用以下代码：-

/* /:bankCode-:credit

但它试图完全匹配 /:bankCode-:credit

我该怎么做才能解决这个问题？

Answer 1

我在这里重现了你的问题 https://codesandbox.io/s/trusting-frost-ls353

解决方法很简单，添加一个文件_redirects到您的公共文件夹中，并包含此内容

/* /index.html 200

您可以在此链接上找到更多信息。https://www.slightedgecoder.com/2018/12/18/page-not-found-on-netlify-with-react-router/