React BrowserRouter funciona al navegar en localhost. Al actualizar una página que no sea la de inicio cuando está desplegada, arroja un error 404 no encontrado.

Mi código utiliza React-router-dom. Funciona en gh-pages con toda la navegación dentro de la página. Sin embargo, al agregar /blog a la URL o al actualizar la página /blog, devuelve un error 404 no encontrado. La aplicación está estructurada de la siguiente manera:

App.js:

function App() {
  return (
    <div classname="App">
      <header classname="App-header" width="100%">
          <browserrouter basename="/">
            <switch>
              <route component="{Main}" exact="" path="/"></route> 
              <route component="{Blog}" exact="" path="/blog"></route> 
            </switch>
          </browserrouter>
      </header>
    </div>
  );
}
export default App;

Blog.js:

function Blog() {
  return (
    <div classname="App">
      <header classname="App-header" width="100%">
        <div id="home" width="100%">
          <browserrouter id="blog">

              <div>
                <route component="{AllPosts}" exact="" path="/blog/"></route>
                <route component="{OnePost}" exact="" path="/blog/:slug"></route>
              </div>

          </browserrouter>

          <sidebarifbrowser></sidebarifbrowser>

        </div>
      </header>
    </div>
  );
}

export default Blog;

¿Me falta algo esencial?