javascript - Why is my navbar collapse toggle not working in react

I wanted to create a responsive navbar. But the toggle does not work. What should I do?

I added the bootstrap, jQuery and popper.js links as specified in the bootstrap documentation and created a navbar ponent. The navbar is styled like it should be when not collapsed, but after collapse the Toggle does not work.

import React, { Component } from 'react';

import "jquery/dist/jquery"
import "bootstrap/dist/js/bootstrap";
import 'bootstrap/dist/css/bootstrap';

class Navbar extends Component {
    render() {
        return (
            <React.Fragment>
                
                <nav className="navbar navbar-expand-lg navbar-light bg-light">
                    <a className="navbar-brand" href="/">Aditya Chopra</a>
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="/navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>

                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav mr-auto">
                            
                            <li className="nav-item">
                                <a className="nav-link" href="/About">About</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/Contact">Contact</a>
                            </li>
                            <li className="nav-item active">
                                <a className="nav-link" href="/Projects">Projects </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </React.Fragment> 
        );
    }
}

export default Navbar;

I wanted to create a responsive navbar. But the toggle does not work. What should I do?

import React, { Component } from 'react';

import "jquery/dist/jquery"
import "bootstrap/dist/js/bootstrap";
import 'bootstrap/dist/css/bootstrap';

class Navbar extends Component {
    render() {
        return (
            <React.Fragment>
                
                <nav className="navbar navbar-expand-lg navbar-light bg-light">
                    <a className="navbar-brand" href="/">Aditya Chopra</a>
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="/navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>

                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav mr-auto">
                            
                            <li className="nav-item">
                                <a className="nav-link" href="/About">About</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/Contact">Contact</a>
                            </li>
                            <li className="nav-item active">
                                <a className="nav-link" href="/Projects">Projects </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </React.Fragment> 
        );
    }
}

export default Navbar;

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link rel="stylesheet" href="https://use.fontawesome./releases/v5.8.2/css/all.css">
  <title>Aditya Chopra</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

When the viewport is small enough, I expected it to expand the navbar via the toggle button, but it does nothing.

Share Improve this question edited May 19, 2019 at 11:43 asked May 19, 2019 at 10:57 Aditya Chopra 951 gold badge1 silver badge9 bronze badges

ReactJs integrates states. Your code does not. You should have a look on reactstrap which integrates all bootstrap ponents for you. – Alexandre Tranchant Commented May 19, 2019 at 12:30

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

Your data-target attribute is not set properly here,

<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="/navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
</button>

Problem in above code is data-target="/navbarSupportedContent" attribute.

When you try to connect your toggler icon with your menu options using id, you should use # for id like data-target="#navbarSupportedContent" instead you are using / which is the reason your toggler icon not working.

Try https://react-bootstrap.github.io/ponents/navbar/ or https://mdbootstrap./docs/jquery/navigation/navbar/.

When trying to use react-bootstrap in codepen I came across an issue with Nav.Link, so used Link from react-router.

const Navbar = ReactBootstrap.Navbar;
const Button = ReactBootstrap.Button;
const Form = ReactBootstrap.Form;
const NavDropdown = ReactBootstrap.NavDropdown;
const Nav = ReactBootstrap.Nav;
const FormControl = ReactBootstrap.FormControl;
const NavItem = ReactBootstrap.NavItem;
const Link = ReactRouter.Link;

class App extends React.Component {
  constructor(props) {
    super(props);
  }

    render() {
      return (
        <Navbar bg="light" expand="lg"> 
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
           <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="mr-auto">
                <NavItem ponentClass={Link} href="/" to="/">Home</NavItem>
               <NavItem ponentClass={Link} href="/projects" to="/">Projects</NavItem>
               <NavItem ponentClass={Link} href="/about" to="/">About us</NavItem>
               <NavItem ponentClass={Link} href="/contact" to="/">Contact us</NavItem>
              </Nav>
              </Navbar.Collapse>
          </Navbar>
  );
}
};

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

Half baked code sample: https://codepen.io/vardamanpk/pen/dEzKOx

For toggle, you have to use Jquery link and for Bootstrap 5 there is no Jquery, in Bootstrap 5 there is only css and javascript link, so you rather go for Bootstrap 3 or Bootstrap 4.

<script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why is my navbar collapse toggle not working in react - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)