Reactjs react js网站中的路由问题。无法加载主页面

我正在以Reactjs作为客户端，以Nodejs作为后端构建一个网站

我希望将客户端路由添加到应用程序中。 所有导入都包含在每个单独的文件中。 代码如下：

index.js

ReactDOM.render(
   <App />
   
 , document.getElementById('app'))

 return (
<BrowserRouter>
<div>   
<div className="collapse
navbar-collapse" id="ftco-nav">
                
                    <ul className="navbar-nav m-auto">
                          <li className="nav-item"><Link to="/" className="nav-link">Home </Link></li>
                          <li className="nav-item"><Link to="/about" className="nav-link">About Us </Link></li>
                          <li className="nav-item"><Link to="/trainer" className="nav-link">Trainer </Link></li>
                      <li className="nav-item"><Link to="/classes" className="nav-link">Classes </Link></li>
                          <li className="nav-item"><Link to="/disclaimer" className="nav-link">Disclaimer </Link></li>
                          
                    </ul> 
                    <Switch>
                         <Route exact path="/" component={App} /> 
                        <Route path="/trainer" component={Trainer} />
                        <Route path="/about" component={About} />
                        <Route path="/classes" component={Classes} />
                        <Route path="/disclaimer" component={Disclaimer} />
                        </Switch>
                     </div></div></BrowserRouter> ) 

ReactDOM.render(
，document.getElementById（'app'））

public/index.html

<div id="app"></app> 

App.js

ReactDOM.render(
   <App />
   
 , document.getElementById('app'))

 return (
<BrowserRouter>
<div>   
<div className="collapse
navbar-collapse" id="ftco-nav">
                
                    <ul className="navbar-nav m-auto">
                          <li className="nav-item"><Link to="/" className="nav-link">Home </Link></li>
                          <li className="nav-item"><Link to="/about" className="nav-link">About Us </Link></li>
                          <li className="nav-item"><Link to="/trainer" className="nav-link">Trainer </Link></li>
                      <li className="nav-item"><Link to="/classes" className="nav-link">Classes </Link></li>
                          <li className="nav-item"><Link to="/disclaimer" className="nav-link">Disclaimer </Link></li>
                          
                    </ul> 
                    <Switch>
                         <Route exact path="/" component={App} /> 
                        <Route path="/trainer" component={Trainer} />
                        <Route path="/about" component={About} />
                        <Route path="/classes" component={Classes} />
                        <Route path="/disclaimer" component={Disclaimer} />
                        </Switch>
                     </div></div></BrowserRouter> ) 

返回(

主页
关于我们
培训师
类别
免责声明

) 

然而，在localhost:3000上，我只看到一个旋转的屏幕，它不会加载主页。

---

我应该如何解决这个问题？

在我看来，组件应用程序被永远调用，因为它在交换机内部使用，并且作为根组件的名称。是的@rodrigamaral是正确的。将

App

作为您的根组件删除，如果有帮助，请告知我们