React Bootstrap с использованием компонента Nav обновляет приложение - PullRequest
Новая
       37

React Bootstrap с использованием компонента Nav обновляет приложение

1 голос
/ 18 июня 2020

Я попытался использовать простую ссылку с классом bootstrap, как показано ниже, и он работал нормально. 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <ul class="navbar-nav">
        <li class="nav-item">
          <Link class="nav-link" to="/">
            Home
          </Link>
        </li>
        <li class="nav-item">
          <Link class="nav-link" to="/login">
            Login
          </Link>
        </li>
        <li class="nav-item">
          <Link class="nav-link" to="/product">
            Product
          </Link>
        </li>
        <li class="nav-item">
          <Link class="nav-link" to="/product/3">
            Details
          </Link>
        </li>
      </ul>
</nav>

Но когда я попытался использовать компонент Nav из библиотеки react-bootstrap, как показано ниже , он обновляет приложение при каждом щелчке, как при использовании тега привязки, это может быть связано с тем, что я использую здесь href. Но я не знаю, как я могу просто использовать свойство, подобное to в Link. 

<Nav defaultActiveKey="/" as="ul">
      <Nav.Item as="li">
        <Nav.Link href="/">Home</Nav.Link>
      </Nav.Item>
      <Nav.Item as="li">
        <Nav.Link href="/login">Login</Nav.Link>
      </Nav.Item>
      <Nav.Item as="li">
        <Nav.Link href="/product">Product</Nav.Link>
      </Nav.Item>
</Nav>

1 Ответ

2 голосов
/ 18 июня 2020

Попробуйте использовать Nav.Link с as={Link}, to вместо href реквизитов, как показано ниже: 

import { Link } from 'react-router-dom'


<Nav.Link as={Link} to="/login">...</Nav.Link>

Рабочий пример Демо

...