React-router-bootstrap hatasından LinkContainer bileşeni için bir çözüm var mı?

0

Soru

Bu yüzden Nav'ımı sarmak için react-router-bootstrap LinkContainer bileşenini kullanıyorum.Bootstrap'ten bağlantı bileşeni. Referans için lütfen aşağıdaki resme bakın.

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

// Snippet

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

// Snippet

Ama bu hatayı kodumla alıyorum: [Hata Fotoğrafı] [1] [1]: https://i.stack.imgur.com/AF41y.png

Bu arada, React v. 17.0.2 ve React-Router-Bootstrap v. 0.25. 0 kullanıyorum

Birisinin yardım edip edemeyeceğini sormak istiyorum ya da sadece react-router-bootstrap sürümümü değiştirmeli miyim, hatta bunun yerine bir react-router-bileşeni kullanmalıyım.

Şimdiden teşekkür ederim.

2

En iyi cevabı

1

Sorunu çoktan çözdüm.

Kullanmak yerine LinkContainer bileşen react-router-bootstrap, Sadece kullandım as mülkiyet içinde <Nav.Link> ve değerini şu şekilde ayarlayın: Link bileşen 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

Referans için bu sorunun cevabını kullandım: ReactJS Önyükleme Gezinme Çubuğu ve Yönlendirme birlikte çalışmıyor

2021-11-24 04:07:43
0

Ayrıca bir Nav'ı saran LinkContainer ile ilgili sorunlarım var.Bağlantı aşağıdaki gibidir:

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

Bu bağımlılıkları kullanıyorum:

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

Web sitemi Chrome tarayıcısında görmeye başlamak için npm çalıştırırken bu hatayı alıyorum:

TypeError: (0, _reactRouterDom.withRouter) bir işlev değildir ./ 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);

6.0.2 yerine react-router-dom 5.0.0 kullanan başka bir eski projede linkcontainer'a sahip olduğumdan 6.0.2'yi kaldırdım

npm uninstall react-router-dom

Ve sonra 5.0.0 sürümünü yükledim:

npm i [email protected]

Bu, LinkContainer sorununu düzeltti ve web sayfası gayet iyi çalıştı.

React-router-bootstrap ile react-router-dom 6.0.2'nin en son sürümü arasında bir uyumsuzluk sorunu var gibi görünüyor ya da onu kurmanın doğru yolu değişti ve bunların nasıl birlikte çalışacağına dair en son talimatları görmedim.

Umarım bu yardımcı olur ve başka biri 6.0.2'nin react-router-dom'un 5.0.0 sürümüne geri dönmeden nasıl çalışacağına dair daha fazla bilgiye sahipse, lütfen bize bildirin.

2021-11-24 02:47:44

Teşekkürler Silverio
wizby_

Bootstrap'tan LinkContainer kullanmak yerine react router dom'dan Link bileşenini kullandım ve ardından bootstrap navlink bileşenlerinden as özelliğini kullandım. Daha fazla bilgi için gönderdiğim cevabı kontrol edebilirsiniz.
wizby_

Diğer dillerde

Bu sayfa diğer dillerde

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