#javascript #css #reactjs #navbar #antd
#язык JavaScript #CSS #реагирует на #навигационная панель #антд
Вопрос:
Я создаю проект с использованием React и ant design. Я создал навигационную панель, но она не отображается должным образом. Я могу выбрать опцию, но не могу отменить ее выбор (как показано на рисунке, проект находится на начальной стадии, поэтому все немного не выровнено). Вы можете просмотреть сайт здесь: http://192.168.56.1:3000/ .Я предоставляю код для app.js и navbar.jsx 
App.js:
const App = () =gt; { return ( lt;div className="app"gt; lt;div className="navbar"gt; lt;Navbar /gt; lt;/divgt; lt;div className="main"gt; lt;Layoutgt; lt;div className="routes"gt; lt;Switchgt; lt;Route exact path="/"gt; lt;Homepage /gt; lt;/Routegt; lt;Route exact path="/cryptocurrencies"gt; lt;Cryptocurrencies /gt; lt;/Routegt; lt;Route exact path="/exchanges"gt; lt;Exchanges /gt; lt;/Routegt; lt;Route exact path="/news"gt; lt;News /gt; lt;/Routegt; lt;Route exact path="/crypto/:coinId"gt; lt;CryptoDetails /gt; lt;/Routegt; lt;/Switchgt; lt;/divgt; lt;/Layoutgt; lt;div className="footer"gt; lt;Typography.Title level={5} style={{ color: 'white', textAlign: 'center' }}gt; Krypton lt;br /gt; All rights reserved lt;/Typography.Titlegt; lt;Spacegt; lt;Link to="/"gt;Homelt;/Linkgt; lt;Link to="/exchanges"gt;Exchangeslt;/Linkgt; lt;Link to="/news"gt;Newslt;/Linkgt; lt;/Spacegt; lt;/divgt; lt;/divgt; lt;/divgt; ); } Navbar.jsx:
const Navbar = () =gt; { return ( lt;div className="nav-container"gt; lt;div className="logo-container"gt; lt;Avatar src={icon} size="large" /gt; lt;Typography.Title level={2} className="logo"gt; lt;Link to="/"gt;Kryptonlt;/Linkgt; lt;/Typography.Titlegt; {/* lt;Button className="menu-control-container"gt; lt;/Buttongt; */} lt;/divgt; lt;Menu theme="dark"gt; lt;Menu.Item icon={lt;HomeOutlined /gt;}gt; lt;Link to="/"gt;Homelt;/Linkgt; lt;/Menu.Itemgt; lt;/Menugt; lt;Menu theme="dark"gt; lt;Menu.Item icon={lt;FundOutlined /gt;}gt; lt;Link to="/cryptocurrencies"gt;Cryptocurrencieslt;/Linkgt; lt;/Menu.Itemgt; lt;/Menugt; lt;Menu theme="dark"gt; lt;Menu.Item icon={lt;MoneyCollectOutlined /gt;}gt; lt;Link to="/exchanges"gt;Exchangeslt;/Linkgt; lt;/Menu.Itemgt; lt;/Menugt; lt;Menu theme="dark"gt; lt;Menu.Item icon={lt;BulbOutlined /gt;}gt; lt;Link to="/news"gt;Newslt;/Linkgt; lt;/Menu.Itemgt; lt;/Menugt; lt;/divgt; ); }