title: How to fix "404" error when directly accessing a component in react
body: <p>I am redoing my portfolio in react. So fairly new to it. The problem that I am facing here is, when I've my react project hosted to a server, everything works fine, routing using , moving the page to top upon navigation etc.,
  But I've observed that when I am closing my website tab and trying to directly access a component. For example, if I do "<a href="http://mywebsite.com" rel="nofollow noreferrer">http://mywebsite.com</a>", it works. But if I do "<a href="http://mywebsite.com/contact" rel="nofollow noreferrer">http://mywebsite.com/contact</a>" the page goes 404, and yeah the component does exists. Either approach works well in localhost, but not on the hosted server (Hostinger)</p>
  
  <p>I tried searching over the web, but could not find any reliable answers, many of the posts on StackOverflow say its server related error, but does not show how to fix it. </p>
  
  <p><a href="https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually">React-router urls don&#39;t work when refreshing or writing manually</a></p>
  
  <p><a href="https://stackoverflow.com/questions/55579034/how-to-fix-404-not-found-when-accessing-the-routes-in-the-url-spa-react">How to fix 404 not found when accessing the routes in the url. (SPA REACT)</a></p>
  
  <p><a href="https://stackoverflow.com/questions/52749823/react-router-dom-build-giving-404-when-accessing-url-directly-but-not-in-develo">react-router-dom Build Giving 404 When Accessing URL Directly, But Not In Development</a></p>
  
  <p>This is how my navlinks and route are setup -</p>
  
  <pre><code>class mainContent extends React.Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;div&gt;
            &lt;nav id="navbar"&gt;
              &lt;span&gt;
                &lt;NavLink exact to="/"&gt;
                  PRASHANTH KUMAR SRIPATHI
                &lt;/NavLink&gt;
              &lt;/span&gt;
  
              &lt;li-item&gt;
                &lt;NavLink to="/contact" id="nav-item" className="item"&gt;
                  &lt;i className="fa fa-comments-o" /&gt; Contact
                &lt;/NavLink&gt;
              &lt;/li-item&gt;
              &lt;li-item&gt;
                &lt;NavLink to="/resume" id="nav-item" className="item"&gt;
                  &lt;i className="book icon" /&gt; Resume
                &lt;/NavLink&gt;
              &lt;/li-item&gt;
              &lt;li-item&gt;
                &lt;NavLink to="/portfolio" id="nav-item" className="item"&gt;
                  &lt;i className="list alternate icon" /&gt; Portfolio
                &lt;/NavLink&gt;
              &lt;/li-item&gt;
              &lt;li-item&gt;
                &lt;NavLink exact to="/" id="nav-item" className="item"&gt;
                  &lt;i className="home icon" /&gt; Home
                &lt;/NavLink&gt;
              &lt;/li-item&gt;
  
              {/*&lt;li-item&gt;
                &lt;NavLink to="/about/" className="item"&gt;
                  &lt;i className="address card icon" /&gt; About
                &lt;/NavLink&gt;
              &lt;/li-item&gt; */}
            &lt;/nav&gt;
  
            &lt;div className="content" id="main"&gt;
              &lt;Switch&gt;
                &lt;Route exact path="/" component={home} /&gt;
                &lt;Route path="/contact" component={contactMe} /&gt;
                &lt;Route path="/resume" component={resume} /&gt;
                &lt;Route path="/portfolio" component={portfolio} /&gt;
                {/*&lt;Route path="/about" component={about} /&gt;*/}
              &lt;/Switch&gt;
            &lt;/div&gt;
            &lt;div className="footer"&gt;
              &lt;footer className="relative"&gt;
                &amp;copy; 2019 - Prashanth Kumar Sripathi
              &lt;/footer&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  </code></pre>
  
  <p>How can I fix this so that it does not show 404. I don't want to fix this in a way that it is redirected to "<a href="http://mywebsite.com" rel="nofollow noreferrer">http://mywebsite.com</a>" because if I were to built another site that has cope snippets I need to share which would just reroute it to index page.</p>