CODEWITHSUNDEEP
reactjsdeploymentreact-routernetlifynetlify-cli
aditya81070
aditya81070

Reputation: 736

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?

Upvotes: 12

Views: 6209

Answers (4)

Shubham Sarda
Shubham Sarda

Reputation: 635

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/

Upvotes: 0

AWE FRANCIS OLAWUMI
AWE FRANCIS OLAWUMI

Reputation: 225

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/

Upvotes: 0

siva surya
siva surya

Reputation: 701

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.

Upvotes: 1

Daniel Doblado
Daniel Doblado

Reputation: 2868

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/

Upvotes: 24

Related Questions