Rota não funcionando corretamente

Olá,

O meu AutorBox não está conseguindo carregar o código da Home, ele apenas aparece o próprio conteúdo dele!

https://imgur.com/a/8jxtg0b

App.js

class App extends Component {

  render() {
    return (


      <div id="layout">

    <a href="#menu" id="menuLink" className="menu-link" >

        <span></span>
    </a>

    <div id="menu">
        <div className="pure-menu">
            <a className="pure-menu-heading" >Company</a>

            <ul class="pure-menu-list">

            <li className="pure-menu-item"><Link to="/" className="pure-menu-link">Home</Link></li>
            <li className="pure-menu-item"><Link to="/autor" className="pure-menu-link">Autor</Link></li>
            <li className="pure-menu-item"><Link to="#" className="pure-menu-link">Livro</Link></li>

            </ul>
        </div>
    </div>

    <div id="main">

                    {this.props.children}

          </div>   
          </div>         


    );
  }
}

Index.js

ReactDOM.render((
        <Router>
            <App>
                    <Switch>            
                        <Route exact path="/" component={Home}/>
                        <Route path="/autor" component={AutorBox}/>
                        <Route path="/livro"/>                
                    </Switch>            
            </App>
        </Router>

), document.getElementById('root'));
registerServiceWorker();

Home.js

export default class Home extends Component{
    render(){
      return (
          <div>
        <div className="header">
          <h1>Bem-vindo ao sistema</h1>
        </div>
        <div className="content" id="content">
        </div>
        </div>
      );
    }
}