Есть ли решение для компонента LinkContainer из ошибки react-router-bootstrap?

0

Вопрос

Поэтому я использую компонент LinkContainer из react-router-bootstrap, чтобы обернуть свою навигацию.Компонент связи из начальной загрузки. Пожалуйста, обратитесь к изображению ниже для справки.

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

// Snippet

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

// Snippet

Но я получаю эту ошибку с моим кодом: [Фотография с ошибкой][1] [1]: https://i.stack.imgur.com/AF41y.png

Кстати, я использую React v. 17.0.2 и React-Маршрутизатор-Загрузочную версию v. 0.25.0

Я хотел бы спросить, может ли кто-нибудь помочь, или я должен просто изменить свою версию моего загрузчика react-маршрутизатора или даже использовать вместо этого компонент react-маршрутизатора.

Заранее спасибо.

2

Лучший ответ

1

Я уже решил эту проблему.

Вместо использования LinkContainer компонент из react-router-bootstrap, я просто использовал as собственность внутри <Nav.Link> и установите его значение в качестве Link составляющая 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

Я использовал ответ на этот вопрос для справки: Навигационная панель начальной загрузки ReactJS и маршрутизация не работают вместе

2021-11-24 04:07:43
0

У меня также есть проблемы с LinkContainer, обертывающим навигатор.Ссылка выглядит следующим образом:

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

Я использую эти зависимости:

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

Я получаю эту ошибку при запуске npm, чтобы начать просматривать свой веб-сайт в браузере Chrome:

Ошибка типа: (0 , _reactRouterDom.withRouter) не является функцией ./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);

Поскольку у меня есть LinkContainer в другом более старом проекте, в котором используется react-router-dom 5.0.0, вместо 6.0.2, я удалил 6.0.2 с помощью

npm uninstall react-router-dom

А затем установил версию 5.0.0 с:

npm i [email protected]

Это устранило проблему с хранителем ссылок, и веб-страница работала просто отлично.

Похоже, существует проблема несовместимости между загрузкой react-router и последней версией react-router-dom 6.0.2, или изменился правильный способ ее настройки, и я не видел последних инструкций о том, как заставить их работать вместе.

Надеюсь, это поможет, и если у кого-то еще есть больше информации о том, как заставить 6.0.2 работать без отката к версии 5.0.0 react-router-dom, пожалуйста, сообщите нам об этом.

2021-11-24 02:47:44

Спасибо тебе Сильверио
wizby_

Вместо использования LinkContainer из начальной загрузки я использовал компонент Link из react router dom, а затем использовал свойство as из компонентов начальной загрузки navlink. Вы можете проверить ответ, который я опубликовал, для получения дополнительной информации.
wizby_

На других языках

Эта страница на других языках

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