Question

我正在创建一个使用React Router的React App。我正在使用路由器来匹配:/bankName-:credit之类的路径，并且在本地开发中工作正常。我的应用程序唯一需要的路径是:/bankName-:credit，其他所有路径都将命中404。但是，当我将该应用程序部署为netlify时，默认情况下它将转到/并显示自定义404。很好但是现在，如果我尝试转到/hdfc-500，它将显示page not found的netlify找不到消息。

我尝试使用netlify docs中提到的_redirects，但这是行不通的。

这是我的路线：-

App.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/

Answer 2

在在netlify中传递url参数时遇到了这个问题，并通过删除“”解决了问题。 build 文件夹中 index.html 文件中的href和src链接之前。

使用react-router-dom

2 个答案: