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

问题描述

我正在创建一个使用React Router的React App.我正在使用路由器来匹配:/bankName-:credit 之类的路径，并且在本地开发中效果很好.我的应用程序唯一需要的路径是:/bankName-:credit ，其他所有路径都将命中 404 .但是，当我将此应用程序部署为netlify时，默认情况下它将转到/，并显示自定义的 404 .很好但是现在，如果我尝试转到/hdfc-500 ，那么它会发出一条netlify找不到消息，提示 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文档 _redirects a>但这不起作用.

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

该如何解决?

推荐答案

我在这里重新创建了您的问题 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.tinyedgecoder.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屋！