Проблема с маршрутизацией на веб-сайте react js. Не удается загрузить главную страницу

#reactjs #routes #react-router-dom

#reactjs #маршруты #react-router-dom

Вопрос:

Я создаю веб-сайт в Reactjs как на стороне клиента, а Nodejs — как серверную часть.

Я хочу добавить маршрутизацию на стороне клиента в приложение. Весь импорт включен в каждый отдельный файл. Код выглядит следующим образом:

index.js

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

public/index.html

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

App.js

  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 я просто вижу вращающийся экран, и он не загружает главную страницу.
Как я должен это исправить?

Комментарии:

1. Мне кажется, что приложение компонента вызывается вечно, поскольку оно используется внутри коммутатора и как имя корневого компонента.

2. Да, @RodrigoAmaral прав. Удалите App как свой корневой компонент, так как сообщите нам, если это поможет