title: React Router BrowserRouter leads to "404 Not Found - nginx " error when going to subpage directly without through a home-page click
body: <p>I am using React Router for routing for a multi-page website. When trying to go to a sub page directly <a href="https://test0809.herokuapp.com/signin" rel="noreferrer">https://test0809.herokuapp.com/signin</a> you'd get a "404 Not Found -nginx" error (To be able to see this problem you might need to go to this link in Incognito mode so there's no cache). All the links work fine if you go from the home page: <code>test0809.herokuapp.com/</code>. I was using BrowserRouter and was able to eliminate the "404 not found" error by changing BrowserRouter to HashRouter, which gives all my urls a "#" sign. Besides all the problems with having a "#" in your urls, the biggest issue with it is that I need to implement LinkedIn Auth in my website, and LinkedIn OAuth 2.0 does not allow redirect URLs to contain #.
  <a href="https://i.stack.imgur.com/epVHg.png" rel="noreferrer">LinedIn OAuth 2.0 error screen grab</a></p>
  
  <pre><code>import React, { Component } from 'react'
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
  import LinkedIn from 'react-linkedin-login'
  const Home = () =&gt; &lt;div&gt;&lt;h2&gt;Home&lt;/h2&gt;&lt;/div&gt;
  const About = () =&gt; &lt;div&gt;&lt;h2&gt;About&lt;/h2&gt;&lt;/div&gt;
  class Signin extends Component {
    callbackLinkedIn = code =&gt; {
      console.log(1, code)
    }
    render() {
        return (
            &lt;div&gt;
                &lt;h2&gt;Signin&lt;/h2&gt;
                &lt;LinkedIn
                    clientId="clientID"
                    callback={this.callbackLinkedIn}
                &gt;
            &lt;/div&gt;
        )
    }
  }
  const BasicExample = () =&gt;
    &lt;Router&gt;
      &lt;div&gt;
        &lt;ul&gt;
           &lt;li&gt;
             &lt;Link to="/"&gt;Home&lt;/Link&gt;
           &lt;/li&gt;
           &lt;li&gt;
             &lt;Link to="/about"&gt;About&lt;/Link&gt;
           &lt;/li&gt;
           &lt;li&gt;
             &lt;Link to="/signin"&gt;Signin&lt;/Link&gt;
           &lt;/li&gt;
        &lt;/ul&gt;
    &lt;hr /&gt;
  
        &lt;Route exact path="/" component={Home} /&gt;
        &lt;Route path="/about" component={About} /&gt;
        &lt;Route path="/signin" component={Signin} /&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  export default BasicExample
  </code></pre>
  
  <p>Any suggestions on the workarounds?</p>
  
  <p>Background: I started the project with create-react-app. GitHub repo: <code>/debelopumento/test0809</code></p>