Existe uma solução para LinkContainer componente de reagir-roteador-bootstrap do erro?

0

Pergunta

Então, eu estou usando o LinkContainer componente de reagir-roteador-bootstrap para quebrar a minha Nav.Link componente de bootstrap. Por favor, consulte a imagem abaixo para referência.

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

// Snippet

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

// Snippet

Mas estou recebendo este erro com o meu código: [Erro De Fotos][1] [1]: https://i.stack.imgur.com/AF41y.png

A propósito, estou usando Reagir v. 17.0.2 e Reagir-Roteador-Bootstrap v. 0.25.0

Eu gostaria de perguntar se alguém pode ajudar ou devo apenas mudar a minha versão do meu reagir-roteador-bootstrap ou até mesmo usar um reagir-roteador-componente em vez disso.

Obrigado antecipadamente.

2

Melhor resposta

1

Eu já resolveu o problema.

Em vez de usar um LinkContainer componente de react-router-bootstrap, Eu usei apenas o as propriedade dentro do <Nav.Link> e defina o respectivo valor como o 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

Eu usei a resposta desta questão para a referência: ReactJS Bootstrap barra de Navegação e de Roteamento não funcionar em conjunto

2021-11-24 04:07:43
0

Eu também tenho problemas com LinkContainer envolvendo um Nav.Link da seguinte forma:

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

Eu estou usando esse dependências:

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

Estou recebendo este erro quando executar npm começar a ver o meu site no navegador Chrome:

TypeError: (0 , _reactRouterDom.withRouter) não é uma função ./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);

Desde que eu tenho a LinkContainer em outro mais antigo projeto, que está usando reagir-roteador-dom 5.0.0, em vez de o 6.0.2, eu desinstalei o 6.0.2 com

npm uninstall react-router-dom

E, em seguida, instalou o 5.0.0 versão com:

npm i [email protected]

Que fixa a LinkContainer problema e a página da web funcionava muito bem.

Parece que há um problema de incompatibilidade entre a reagir-roteador-bootstrap e a versão mais recente de reagir-roteador-dom 6.0.2, ou a maneira correta de configurar mudou e eu não vi mais recente instruções sobre como fazê-los trabalhar juntos.

Espero que isso ajude, e se alguém tem mais idéias sobre como fazer 6.0.2 trabalho sem reverter para a versão 5.0.0 de reagir-roteador-dom, por favor, deixe-nos saber.

2021-11-24 02:47:44

Obrigado Silverio
wizby_

Em vez de usar LinkContainer de bootstrap eu usei o Link componente de reagir roteador dom, em seguida, utilizado como propriedade de bootstrap navlink componentes. Você pode verificar a resposta que eu postei para obter mais informações.
wizby_

Em outros idiomas

Esta página está em outros idiomas

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