Netlify does not recognize the URL params when using react-router-dom

Question

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.

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

Here are my routes:-

App.js

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

Here is my NestedRoutes component:-

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>
)

I am using following code in my _redirects file:-

/* /:bankCode-:credit

But it try to match exactly with /:bankCode-:credit

What should I do to fix this?

Answer 1

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

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

/* /index.html 200

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

Answer 2

I got this problem while passing url params in netlify and got solved by removing the "." before the href and src links in the index.html file inside the build folder.

Hope this will help someone.