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?

Ilion

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/

Lyublin

Thanks, it solved my problem. I was trying different redirects like but this one solved my problem. – Ilion

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.

Lateritious

Answer 3

For Angular, this solution works for me Add _redirects file in your src folder with the following line of code

/* /index.html 200

Then ensure you include the _redirects file in your angular.json assets array so that Angular will include a copy of the file when building your project:

"assets": [
  "src/_redirects"
]

You can find more info on this link https://docs.netlify.com/integrations/frameworks/angular/

Eellike

Answer 4

One common solution that Netlify mentioned with their blog is structured configuration with netlify.toml

A. Create netlify.toml in your root directory

B. Add the following code that defines the custom redirect rules,

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

C. Deploy the file on Netlify along with your project.

Blog Reference: https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/

Veridical