C'è una soluzione per LinkContainer componente da reagire-router-bootstrap errore?

0

Domanda

Così sto usando la LinkContainer componente da reagire-router-bootstrap per avvolgere il mio Nav.Link al componente da bootstrap. Si prega di fare riferimento alla foto qui sotto per riferimento.

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

// Snippet

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

// Snippet

Ma ottengo questo errore con il mio codice: [Errore Foto][1] [1]: https://i.stack.imgur.com/AF41y.png

A proposito, sto usando Reagire v. 17.0.2 e Reagire-Router-Bootstrap v. 0.25.0

Vorrei chiedere se qualcuno può aiutarmi o devo solo cambiare la mia versione del mio reagire-router-bootstrap o anche usare un reagire-router-componente, invece.

Vi ringrazio in anticipo.

2

Migliore risposta

1

Ho già risolto il problema.

Invece di utilizzare un LinkContainer componente da react-router-bootstrap, Ho solo usato as proprietà all'interno di una <Nav.Link> e impostare il suo valore come l' Link componente di 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

Ho usato la risposta a questa domanda per riferimento: ReactJS Bootstrap Navbar e di Routing non funzionano insieme

2021-11-24 04:07:43
0

Anche io ho problemi con LinkContainer il confezionamento di un Nav.Link come segue:

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

Sto usando questo dipendenze:

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

Ricevo questo errore quando si esegue npm iniziare a vedere il mio sito web nel browser Chrome:

TypeError: (0 , _reactRouterDom.withRouter) non è una funzione ./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);

Dal momento che ho la LinkContainer su un altro progetto più anziani, che utilizza reagire-router-dom 5.0.0, invece di 6.0.2, ho disinstallato il 6.0.2 con

npm uninstall react-router-dom

E poi installato la versione 5.0.0 con:

npm i [email protected]

Che fissa il LinkContainer problema e la pagina web ha lavorato bene.

Sembra che ci sia un problema di incompatibilità tra reagire-router-bootstrap e l'ultima versione di reagire-router-dom 6.0.2, o il modo corretto l'impostazione è cambiata e non ho visto l'ultima versione delle istruzioni su come fare il loro lavoro insieme.

Spero che questo aiuta, e se qualcun altro ha ulteriori approfondimenti su come fare 6.0.2 lavoro senza il rollback alla versione 5.0.0 di reagire-router-dom, vi preghiamo di farcelo sapere.

2021-11-24 02:47:44

Grazie Silverio
wizby_

Invece di utilizzare LinkContainer da bootstrap ho usato il Link di un componente dal reagire router dom utilizzato la proprietà da bootstrap navlink componenti. È possibile controllare la risposta che ho postato per ulteriori informazioni.
wizby_

In altre lingue

Questa pagina è in altre lingue

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