#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
как свой корневой компонент, так как сообщите нам, если это поможет