1

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>
 )
}
Amadeo de la Peña
  • 51
  • 7
  • Have you setup the routing part using `react-router-dom` `BrowserRouter`, `Route` & `Switch`? If yes, then can you show that part of code here also? – lala Oct 31 '21 at 15:18
  • There. Let me know if you find any issues. Thanks – Amadeo de la Peña Oct 31 '21 at 15:25
  • Where are your imports for your `Search` and `Home` components in `App.js`? – Will Ward Oct 31 '21 at 15:51
  • there. Everything is good from the react-router angle. It works when i delete the toogle button and leave only the links in a list. – Amadeo de la Peña Oct 31 '21 at 16:12
  • Yeah, you need jquery and popper to make it fully functional. Have you tried React Bootstrap? It has that functionality built into it. You just use it alongside the basic bootstrap css package (assuming you've installed bootstrap) https://stackoverflow.com/a/38136836/10262432 – Will Ward Oct 31 '21 at 16:22
  • I'm using the new version of react-router, so this may not be true in your version (which appears to be v5). But in the new version, `Link` can only be used within the context of a `Router` (which is what replaced `Switch`). If you move `` inside the context of `Switch` does it work? – Cal Irvine Dec 09 '21 at 15:02

1 Answers1

0

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.

Ricardo D Anaya
  • 1