Блог

У меня проблема с моей навигационной панелью: я создаю свой элемент js и копирую и вставляю код формы bootswatch в элемент render(). Теперь я вижу панель навигации, но она никак не расширяется. Я устанавливаю bootswatch, bootstrap, react-bootstrap в свой код; улучшаю файл css в app.js файл, но не грех жизни. И точно так же выделенная текущая открытая ссылка, похоже, не перемещается, когда я меняю страницу. Я впервые работаю над этим языком для университетского проекта, поэтому боюсь, что это может создать мне какие-то проблемы в будущем.

Вот код:

 import React, { Component } from 'react';


export default class Navbar extends Component {
    render() {
        return (
            <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
                <a className="navbar-brand" href="/">Fastbook</a>
                <button className="navbar-toggler" type="button" 
                    data-toggle="collapse" 
                    data-target="#navbarColor01" 
                    aria-controls="navbarColor01" 
                    aria-expanded="false" 
                    aria-label="Toggle navigation"
                >
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarColor01">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item active">
                            <a className="nav-link" href="/">Home<span className="sr-only">(current)</span></a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="./Rooms">Prenota</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#">Diventa Oste</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#">About</a>
                        </li>
                    </ul>
                </div>
            </nav>
        )
    }
}