Je tu řešení pro LinkContainer součásti z react-router-bootstrap chyba?

0

Otázka

Tak jsem pomocí LinkContainer součásti z react-router-bootstrap zabalit moje Navigace.Odkaz na složku z bootstrap. Prosím, viz obrázek níže pro referenci.

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

// Snippet

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

// Snippet

Ale já jsem stále tuto chybu s mého kódu: [Chyba Fotografie][1] [1]: https://i.stack.imgur.com/AF41y.png

Mimochodem, já používám Reagovat. v. 17.0.2 a React-Router-Bootstrap v. 0.25.0

Chtěl bych se zeptat, jestli někdo mi může pomoci, nebo bych měl změnit svůj verze mého react-router-bootstrap nebo dokonce použít react-router-složka místo.

Děkuji předem.

2

Nejlepší odpověď

1

Jsem již problém vyřešen.

Namísto použití LinkContainer součásti z react-router-bootstrap,, Jen jsem použil as majetku uvnitř <Nav.Link> a nastavte její hodnotu jako Link součástí 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

Kdysi jsem odpověď na tuto otázku pro odkaz: ReactJS Bootstrap Navbar a Směrování nefunguje spolu

2021-11-24 04:07:43
0

Také mám problémy s LinkContainer balení Nav.Odkaz takto:

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

Jsem pomocí této závislosti:

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

Dostávám tuto chybu, když běží npm začít vidět své webové stránky v prohlížeči Chrome:

TypeError: (0 , _reactRouterDom.withRouter) není funkce ./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);

Od té doby mám LinkContainer na další starší projekt, který je pomocí react-router-dom 5.0.0, místo toho, 6.0.2, já odinstalovali 6.0.2 s

npm uninstall react-router-dom

A pak nainstaloval verzi 5.0.0:

npm i [email protected]

To opraveno LinkContainer problém a webové stránky fungovaly v pohodě.

Zdá se, že tam je problém nekompatibility mezi react-router-bootstrap a nejnovější verze react-router-dom 6.0.2, nebo správný způsob nastavení se změnilo a já jsem neviděl poslední instrukce o tom, jak, aby se jim pracovat společně.

Doufám, že to pomůže, a pokud někdo jiný má více poznatků o tom, jak se 6.0.2 práce bez vrácení zpět na verzi 5.0.0 react-router-dom, dejte nám prosím vědět.

2021-11-24 02:47:44

Děkuji Silverio
wizby_

Namísto použití LinkContainer z bootstrap jsem použil Odkaz komponent od reagují router dom pak využívána jako majetek z bootstrap navlink komponenty. Můžete zkontrolovat odpověď, že jsem vyslán pro více informací.
wizby_

V jiných jazycích

Tato stránka je v jiných jazycích

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