Există o soluție pentru LinkContainer componentă de a reacționa-router-bootstrap eroare?

0

Problema

Deci, eu sunt, folosind LinkContainer componentă de a reacționa-router-bootstrap pentru a încheia mea Nav.Link-ul de componente de la bootstrap. Vă rugăm să consultați imaginea de mai jos pentru referință.

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

// Snippet

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

// Snippet

Dar primesc aceasta eroare cu codul meu: [Eroare De Fotografie][1] [1]: https://i.stack.imgur.com/AF41y.png

Apropo, eu sunt, folosind Reacționa v. 17.0.2 și de a Reacționa-Router-Bootstrap v. 0.25.0

Aș dori să întreb dacă cineva mă poate ajuta sau ar trebui să-mi schimb versiune a mea de a reacționa-router-bootstrap sau chiar folosi un reacționa-router-componentă în loc.

Vă mulțumesc în avans.

2

Cel mai bun răspuns

1

Deja am rezolvat problema.

În loc de a folosi un LinkContainer componenta de react-router-bootstrapAm folosit as de proprietate în interiorul <Nav.Link> și setați valoarea sa ca Link componenta de 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

Am folosit răspunsul la această întrebare pentru referință: ReactJS Bootstrap Navbar și de Rutare nu lucrează împreună

2021-11-24 04:07:43
0

Am, de asemenea, probleme cu LinkContainer ambalaj o Nav.Link-ul după cum urmează:

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

Eu sunt, folosind acest dependențe:

 "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"

Primesc aceasta eroare atunci când rulează npm începe pentru a vedea site-ul meu în browser-ul Chrome:

TypeError: (0 , _reactRouterDom.withRouter) nu este o funcție ./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);

De când am LinkContainer pe un alt proiect mai vechi, care este utilizarea de a reacționa-router-dom 5.0.0, în loc de 6.0.2, am dezinstalat 6.0.2 cu

npm uninstall react-router-dom

Și apoi instalat versiunea 5.0.0 cu:

npm i [email protected]

Ca fix LinkContainer problemă și pe pagina web a lucrat foarte bine.

Se pare că există o problemă de incompatibilitate între a reacționa-router-bootstrap și cea mai recentă versiune a reacționa-router-dom 6.0.2, sau în mod adecvat de înființare a schimbat și nu am văzut mai recente instrucțiuni privind modul de a le face să lucreze împreună.

Sper că acest lucru vă ajută, și dacă altcineva are mai multe perspective cu privire la modul de a face 6.0.2 lucru fără de rulare înapoi la versiunea 5.0.0 de a reacționa-router-dom, vă rugăm să ne anunțați.

2021-11-24 02:47:44

Multumesc Silverio
wizby_

În loc de a folosi LinkContainer de bootstrap am folosit Link-ul de componenta de reacționeze router dom apoi utilizat ca proprietate de la bootstrap navlink componente. Puteți verifica răspunsul pe care l-am postat pentru mai multe informații.
wizby_

În alte limbi

Această pagină este în alte limbi

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