Hay una solución para LinkContainer componente de reaccionar-router-bootstrap error?

0

Pregunta

Así que estoy usando el LinkContainer componente de reaccionar-router-bootstrap para envolver mi Nav.Enlace de componentes de bootstrap. Por favor refiérase a la imagen de abajo como referencia.

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

// Snippet

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

// Snippet

Pero estoy recibiendo este error en mi código: [Error De Foto][1] [1]: https://i.stack.imgur.com/AF41y.png

Por cierto, estoy usando Reaccionar v. 17.0.2 y Reaccionar-Router-Bootstrap v. 0.25.0

Me gustaría preguntar si alguien puede ayudar o debo cambiar mi versión de mi reaccionar-router-bootstrap o incluso el uso de un reaccionan-router-componente en su lugar.

Gracias de antemano.

2

Mejor respuesta

1

Ya he resuelto el problema.

En lugar de utilizar un LinkContainer componente de react-router-bootstrap, Acabo de utilizar el as propiedad en el interior de la <Nav.Link> y establecer su valor como el Link componente 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

He utilizado la respuesta de esta pregunta de referencia: ReactJS Bootstrap Navbar y Enrutamiento de no trabajar juntos

2021-11-24 04:07:43
0

También tengo problemas con LinkContainer envolver un Nav.Enlace de la siguiente manera:

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

Estoy usando este dependencias:

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

Estoy recibiendo este error cuando ejecuta mecanismo nacional de prevención de empezar a ver mi página web en el navegador Chrome:

TypeError: (0 , _reactRouterDom.withRouter) no es una función ./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);

Ya tengo el LinkContainer en otro proyecto antiguo, que es el uso de reaccionar-router-dom 5.0.0, en lugar de la 6.0.2, he desinstalado el 6.0.2 con

npm uninstall react-router-dom

Y, a continuación, instala la versión 5.0.0 con:

npm i [email protected]

Que fija el LinkContainer problema y la página web funcionaba muy bien.

Parece que hay un problema de incompatibilidad entre reaccionar-router-bootstrap y la última versión de reaccionar-router-dom 6.0.2, o la manera correcta de su puesta en marcha ha cambiado y no he visto últimas instrucciones sobre cómo hacerlos trabajar juntos.

Espero que esto ayude, y si alguien tiene más ideas sobre cómo hacer 6.0.2 trabajo sin revertir a la versión 5.0.0 de reaccionar-router-dom, por favor háganoslo saber.

2021-11-24 02:47:44

Gracias Silverio
wizby_

En lugar de utilizar LinkContainer de bootstrap he usado el Enlace componente de reaccionar router dom, a continuación, utiliza la propiedad de bootstrap navlink componentes. Usted puede comprobar la respuesta que he publicado para más información.
wizby_

En otros idiomas

Esta página está en otros idiomas

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