CODEWITHSUNDEEP
reactjsreact-routernavbarreact-bootstrapbootstrap-5
Amadeo de la Peña
Amadeo de la Peña

Reputation: 71

Why are my react-router Links not working when put inside a Bootstrap 5 dropdown navbar button?

I literally copy-pasted the navbar from the Bootstrap page and changed "class" for "className" in each case because I'm working in React. Then I just put the <Link> inside the <a> item, but even if I replace the <a> with the <Link> it doesn't work in any of both cases. I have also tried replacing the ul with a div and simply puting the links inside. And I also imported jquery to index.js, all solutions that I came with looking in a lot of places. But I simply can't make this work. I'm starting to suspect there is some kind of bug with React-Router and BS working together. But anyway, perhaps you can tell me what am I doing wrong. The button appears, but nothing happens when I click it. The Links should dropdown but they don't.

update: the Links do work in a non-toggling-button navbar. So it is not an issue of react-dom. It is a bootstrap one.

import React from "react";
import {Link} from "react-router-dom";

const Navbar = () => {
    return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
  <div className="container-fluid">
    <a className="navbar-brand">Crea tu equipo de superhéroes</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarNav">
      <ul className="navbar-nav">
        <li className="nav-item">
          <a className="nav-link active" aria-current="page"><Link to="/">Favoritos</Link></a>
        </li>
        <li className="nav-item">
          <a className="nav-link"><Link to="/Search">Búsqueda</Link></a>
        </li>
      </ul>
    </div>
  </div>
</nav>
    )
}

export default Navbar;

App.js :

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navbar from "./Navbar";
import Home from "./Home";
import Search from "./Search";

const App = () => {

 return ( 
        <Router>
            <Navbar/>
            <Switch>
                <Route exact path="/">
                    <Home/>
                </Route>
                <Route path="/Search">
                    <Search/>
                </Route>
            </Switch>
        </Router>
 )
}

Upvotes: 1

Views: 1474

Answers (1)

Ricardo D Anaya
Ricardo D Anaya

Reputation: 1

I was facing this same problem with React router link and a custom library and I solved it wrapping the 'item' tag (in your case 'li') with the 'Link' tag. So you can try something like:

<div className="collapse navbar-collapse" id="navbarNav">
    <ul className="navbar-nav">
        <Link to="/">
            <li className="nav-item">
                <a className="nav-link active" aria-current="page">
                    Favoritos
                </a>
            </li>
        </Link>
        <Link to="/Search">
            <li className="nav-item">
                <a className="nav-link">
                    Búsqueda
                </a>
            </li>
        </Link>
    </ul>
</div>

Not sure is this is going to override some styles since I can't test it with Bootstrap, but for some reason you need to "prioritize" the 'link' tag so you don't loose reference on focus.

Upvotes: 0

Related Questions