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

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

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?

Solution

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/