Czy istnieje rozwiązanie dla składnika LinkContainer z błędu react-router-bootstrap?

0

Pytanie

Dlatego używam składnik LinkContainer z react-router-bootstrap, by zakończyć swoją nawigację.Składnik związku z bootstrap. Proszę, skontaktuj się z obrazka poniżej odniesienia.

// Snippet
import {LinkContainer} from "react-router-bootstrap";

// Snippet

              <LinkContainer to="/cart">
                <Nav.Link class="navlink">
                  <FaShoppingCart /> Cart
                </Nav.Link>
              </LinkContainer>

// Snippet

Ale pojawia się ten błąd z moim kodem: [Zdjęcie z błędem][1] [1]: https://i.stack.imgur.com/AF41y.png

Nawiasem mówiąc, używam React v. 17.0.2 i React-Router-Dysk w wersji v. 0.25.0

Chciałbym zapytać, czy może ktoś pomóc, czy muszę po prostu zmienić swoją wersję mojego bootloadera react-routera lub nawet użyć zamiast tego składnika react-routera.

Z góry dziękuję.

2

Najlepsza odpowiedź

1

Ja już rozwiązał ten problem.

Zamiast używać LinkContainer składnik react-router-bootstrapja po prostu wykorzystał as własność wewnątrz <Nav.Link> i ustaw jego wartość jako Link składowa react-router-dom:

// Here's the code snippet

/* instead of using react-router-bootstrap, we're just going to use the Link component from the react-router-dom */

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

function Header () {
return(
<Nav.Link as={Link} to="/path">children</Nav.Link>
);
}

export Header

Kiedyś odpowiedź na to pytanie dla odniesienia: Pasek nawigacyjny bootstrap ReactJS i routing nie działają razem

2021-11-24 04:07:43
0

Ja również mam problem z LinkContainer, обертывающим nawigator.Link wygląda następująco:

<Navbar.Collapse id='basic-navbar-nav'>
    <Nav className='me-auto'>
         <LinkContainer to='/'>
               <Nav.Link>Home</Nav.Link>
          </LinkContainer>

Używam te zależności:

 "react-bootstrap": "^2.0.2",
        "react-dom": "^17.0.2",
        "react-router-bootstrap": "^0.25.0",
        "react-router-dom": "^6.0.2",
        "react-scripts": "4.0.3"

Otrzymuję ten błąd podczas uruchamiania npm, aby zacząć przeglądać swoją stronę w przeglądarce Chrome:

Błąd typu: (0 , _reactRouterDom.withRouter) nie jest funkcją ./node_modules/react-router-bootstrap/lib/LinkContainer.js

S:/Kuarsis/webapps/kuarsis/frontend/node_modules/react-router-bootstrap/lib/LinkContainer.js:155
  152 |   strict: false,
  153 |   activeClassName: 'active'
  154 | };
> 155 | exports.default = (0, _reactRouterDom.withRouter)(LinkContainer);

Ponieważ mam LinkContainer w innym starym projekcie, w którym stosowany jest react-router-dom 5.0.0, zamiast 6.0.2, usunąłem 6.0.2 z pomocą

npm uninstall react-router-dom

A następnie zainstalowany w wersji 5.0.0 z:

npm i [email protected]

To rozwiąże problem z opiekunem linków i stron-strona działała dobrze.

Wygląda na to, istnieje problem niezgodności między pobraniem react-router i najnowszą wersją react-router-dom 6.0.2, lub zmienił właściwy sposób jej ustawienia, a ja nie widziałem ostatnich instrukcji o tym, jak zmusić je do pracy razem.

Mam nadzieję, że to pomoże, a jeśli ktoś jeszcze nie ma więcej informacji o tym, jak sprawić, by 6.0.2 pracować bez powrotu do wersji 5.0.0 react-router-dom, prosimy o poinformowanie nas o tym.

2021-11-24 02:47:44

Dziękuję ci Сильверио
wizby_

Zamiast LinkContainer z bootstrap użyłem składnik Link z react router dom, a następnie wykorzystał nieruchomość as z elementów bootstrap navlink. Możesz sprawdzić odpowiedź, którą opublikował, aby uzyskać więcej informacji.
wizby_

W innych językach

Ta strona jest w innych językach

Русский
..................................................................................................................
Italiano
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................