Así que estoy usando el componente LinkContainer de react-router-bootstrap para envolver mi componente Nav.Link de bootstrap. Por favor, consulte 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> // SnippetPero recibo este error con mi código: [Foto de error][1] [1]: https://i.stack.imgur.com/AF41y.png
Por cierto, estoy usando React v.17.0.2 y React-Router-Bootstrap v.0.25.0
Me gustaría preguntar si alguien puede ayudar o si simplemente debería cambiar mi versión de mi react-router-bootstrap o incluso usar un componente de react-router en su lugar.
Gracias de antemano.
Ya he resuelto el problema.
En lugar de usar un componente LinkContainer de react-router-bootstrap , solo usé la propiedad as dentro de <Nav.Link> y establecí su valor como el componente Link 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 HeaderUsé la respuesta de esta pregunta como referencia: ReactJS Bootstrap Navbar y Routing no funcionan juntos
También tengo problemas con LinkContainer envolviendo un Nav.Link de la siguiente manera:
<Navbar.Collapse id='basic-navbar-nav'> <Nav className='me-auto'> <LinkContainer to='/'> <Nav.Link>Home</Nav.Link> </LinkContainer>Estoy usando estas 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"Recibo este error cuando ejecuto npm para comenzar a ver mi sitio 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);Como tengo el LinkContainer en otro proyecto anterior, que usa react-router-dom 5.0.0, en lugar del 6.0.2, desinstalé el 6.0.2 con
npm uninstall react-router-domY luego instalé la versión 5.0.0 con:
npm i react-router-dom@5.0.0Eso solucionó el problema de LinkContainer y la página web funcionó bien.
Parece que hay un problema de incompatibilidad entre react-router-bootstrap y la última versión de react-router-dom 6.0.2, o la forma correcta de configurarlo ha cambiado y no he visto las últimas instrucciones sobre cómo hacerlo funcionar. juntos.
Espero que esto ayude, y si alguien más tiene más información sobre cómo hacer que 6.0.2 funcione sin volver a la versión 5.0.0 de react-router-dom, háganoslo saber.