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

user_7852473 0
Viewed 4925

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?

netlify-cli react-router netlify reactjs deployment
3 Answers
user_24989920

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.

user_118418680

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/

user_185542910
Related