Je tu riešenie pre LinkContainer komponentu z reagovať-router-bootstrap chyba?

Question 1

Tak som pomocou LinkContainer komponentu z reagovať-router-bootstrap zabaliť moje Nav.Prepojenie komponentov z bootstrap. Prosím, pozrite sa na obrázok nižšie pre referenčné účely.

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

// Snippet

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

// Snippet

Ale ja, ako túto chybu s mojím kód: [Chyba Foto][1] [1]: https://i.stack.imgur.com/AF41y.png

Mimochodom, ja som pomocou Reagovať v. 17.0.2 a Reagovať-Router-Bootstrap v. 0.25.0

Chcel by som sa opýtať, či niekto môže pomôcť, alebo by som mal len zmeniť moja verzia reagovať-router-bootstrap alebo dokonca používať reagovať-router-komponent miesto.

Ďakujem vopred.

Question 2

Už som vyriešiť problém.

Namiesto použitia LinkContainer komponentov z react-router-bootstrapSom práve používa as majetku vo vnútri <Nav.Link> a nastaviť jeho hodnotu ako Link súčasť 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

Použil som odpoveď na túto otázku odkaz: ReactJS Bootstrap Navbar a Smerovanie nefunguje spolu

Question 3

Tiež mám problémy s LinkContainer balenia Nav.Odkaz dopĺňa takto:

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

Ja používam tento závislostí:

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

Som vypisuje chyba pri spustení npm, začnete vidieť moje webové stránky v prehliadači Chrome:

TypeError: (0 , _reactRouterDom.withRouter) nie je funkcia ./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);

Keďže mám LinkContainer na inom starší projekt, ktorý je pomocou reagovať-router-dom 5.0.0, namiesto 6.0.2, som odinštalovaní aplikácie 6.0.2 s

npm uninstall react-router-dom

A potom nainštalovaný 5.0.0 verzia s:

npm i [email protected]

Že opravili LinkContainer problém a webovú stránku pracoval v pohode.

Zdá sa, že tam je problém s nekompatibilitou medzi reagovať-router-bootstrap a najnovšiu verziu reagovať-router-dom 6.0.2, alebo riadnym spôsobom, ktorým to zmenilo a som nevidel najnovšie pokyny na tom, aby sa im pracovať spoločne.

Dúfam, že to pomôže, a ak niekto iný má viac poznatkov o tom, ako vytvoriť 6.0.2 práce bez koľajových späť na verziu 5.0.0 z reagovať-router-dom, dajte nám prosím vedieť.

tdy · Answer 1 · 2021-11-24T04:07:43

Už som vyriešiť problém.

Namiesto použitia LinkContainer komponentov z react-router-bootstrapSom práve používa as majetku vo vnútri <Nav.Link> a nastaviť jeho hodnotu ako Link súčasť 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

Použil som odpoveď na túto otázku odkaz: ReactJS Bootstrap Navbar a Smerovanie nefunguje spolu

wizby_ · Answer 2 · 2021-11-24T02:47:44

Tiež mám problémy s LinkContainer balenia Nav.Odkaz dopĺňa takto:

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

Ja používam tento závislostí:

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

Som vypisuje chyba pri spustení npm, začnete vidieť moje webové stránky v prehliadači Chrome:

TypeError: (0 , _reactRouterDom.withRouter) nie je funkcia ./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);

Keďže mám LinkContainer na inom starší projekt, ktorý je pomocou reagovať-router-dom 5.0.0, namiesto 6.0.2, som odinštalovaní aplikácie 6.0.2 s

npm uninstall react-router-dom

A potom nainštalovaný 5.0.0 verzia s:

npm i [email protected]

Že opravili LinkContainer problém a webovú stránku pracoval v pohode.

Zdá sa, že tam je problém s nekompatibilitou medzi reagovať-router-bootstrap a najnovšiu verziu reagovať-router-dom 6.0.2, alebo riadnym spôsobom, ktorým to zmenilo a som nevidel najnovšie pokyny na tom, aby sa im pracovať spoločne.

Dúfam, že to pomôže, a ak niekto iný má viac poznatkov o tom, ako vytvoriť 6.0.2 práce bez koľajových späť na verziu 5.0.0 z reagovať-router-dom, dajte nám prosím vedieť.

Namiesto použitia LinkContainer z bootstrap som sa používa na Prepojenie komponentov z reagovať router dom potom využil ako majetok z bootstrap navlink komponentov. Môžete skontrolovať odpoveď, že som pridal ďalšie informácie.

Je tu riešenie pre LinkContainer komponentu z reagovať-router-bootstrap chyba?

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii