使用 react-router-dom 时，Netlify 无法识别 URL 参数 [英] Netlify does not recognize the URL params when using react-router-dom

问题描述

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

I am creating a react app that uses react router. I am using the router to match the paths like :/bankName-:credit and it works fine in local development. The only require path for my application is :/bankName-:credit and every other path will hit 404. But when I deploy this app to netlify then for default it goes to / and shows a custom 404. That's all good. But now if I try to go to /hdfc-500 then it gives a netlify not found message that page not found.

我尝试使用 netlify 文档中提到的 _redirectsa> 但这不起作用.

I tried using _redirects as mentioned in the netlify docs but this does not work.

这是我的路线:-

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 文件中使用以下代码:-

I am using following code in my _redirects file:-

/* /:bankCode-:credit

但它试图与 /:bankCode-:credit

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

What should I do to fix this?

推荐答案

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

I recreated your problem here https://codesandbox.io/s/trusting-frost-ls353

解决方案很简单，将一个名为 _redirects 的文件添加到包含此内容的公共文件夹中

The solution is simple, add a file called _redirects to your public folder with this content

/* /index.html 200

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

You can find more information on this link. https://www.slightedgecoder.com/2018/12/18/page-not-found-on-netlify-with-react-router/

这篇关于使用 react-router-dom 时，Netlify 无法识别 URL 参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！