0

I have deployed a static site in netlify , but the routes I defined in the development mode, only run in chrome browsers, rest other browsers return 404 - page not found. 

import React, { Component } from 'react';
import { Navbar , NavItem } from 'react-materialize';
import { Link } from 'react-router-dom';
class NavBar extends Component {
  render() {
    return (
        <div>
            <Navbar brand='MT' right style={{backgroundColor:'#7f8fa6'}}>
            <NavItem  href="/" to="/">About Me</NavItem>
            <NavItem  href="/services" to="/services">My Services</NavItem>
            <NavItem href="/works" to="works">My Works</NavItem>
            <NavItem  href="/videos" to="videos">My Videos</NavItem>
            <NavItem href="/request" to="request">Request a Quote</NavItem>
             </Navbar>
      </div>
    )
  }
}
export default NavBar;

This is my Netlify Url. https://mithilesh-tarkar.netlify.com/

It Opens on Chrome browser on mobile and on laptop. But it doesnt open on safari and firefox. why is this so ??? can someone help.

codemt
  • 413
  • 2
  • 9
  • 25

1 Answers1

1

The index page is where react router can handle the routing, and I think this issue occurs because if you route to say '/store' somehow if you don't take the below steps it actually routes you to '/store' rather than your react route kicking in from the index page, as to why it works on some browsers and not others, I'm not sure. Would love to know.

By checking your site, (nice site) you seem to have this figured out.

But others with the same issue visiting this page could try creating a file in your public folder called _redirects.

Then inside that file add:

/* /index.html 200

More info can be found here: https://www.crookm.com/2018/02/one-page-app-routing-on-netlify.html

https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps

ZeFr
  • 83
  • 6
  • Thankq for the insight Zayne , i think i have tried creating a _redirects file in the but i couldnt get it to work . So i looked for other alternatives and learned a bit of Heroku , heroku documentation seems pretty clear about react routing.(No offense to netlify). they mentioned the solution for broken url's - by creating a static.json file. and i dont have any issues routing anymore. i would try again the approach you you told and will get back to you. thanks :) – codemt Jun 21 '18 at 09:36