11

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?

4 Answers 4

23

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/

1
  • 1
    Thanks, it solved my problem. I was trying different redirects like but this one solved my problem. Jun 13, 2019 at 11:30
1

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.

0

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/

0

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/

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.