带有 React <Link/> 组件的 Bootstrap 4 NavBar答案

【问题标题】：Bootstrap 4 NavBar with React <Link/> component带有 React <Link/> 组件的 Bootstrap 4 NavBar
【发布时间】：2017-10-03 23:29:36
【问题描述】：

我正在尝试构建一个 Boostrap 4 NavBar，它将使用来自 react-router 的 ReactJS <Link> 组件，而不是原来的 <li> 类。

目前我在正确构建组件时遇到了麻烦，因为最后 ReactJS 组件没有预期的行为。

让我们从original Boostrap 4 NavBar example:开始

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

正在迁移到 ReactJS 组件，如下所示：

import React from 'react';
import Link from 'react-router-dom/Link';

function Menu() {
  return (
    <div>
        <nav className="navbar navbar-toggleable-md navbar-light bg-faded">
          <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <a className="navbar-brand" href="#">Navbar</a>

          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
              <span className="nav-item active">
                <Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
              </span>
              <span className="nav-item">
                <Link className="nav-link" to="/counter">Counter</Link>
              </span>
              <span className="nav-item">
                <Link className="nav-link disabled" to="/about">About</Link>
              </span>
            </ul>
            <form className="form-inline my-2 my-lg-0">
              <input className="form-control mr-sm-2" type="text" placeholder="Search" />
              <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
    </div>
  );
}

export default Menu;

尽管它运行了，但许多格式都丢失了，并且“导航链接禁用”之类的某些功能无法正常工作（您可以单击关于它会转到所需的页面）。

我确定我做错了转换，因此在此感谢帮助修复组件代码，以便在没有 React 的情况下正确反映原始行为。

【问题讨论】：

你有没有在你的html中导入jquery。但是，正如@mrinalmech 所说，您应该尝试在 react 中使用 react-bootstrap 组件

标签： reactjs react-router twitter-bootstrap-4

【解决方案1】：

也许你已经解决了。这是一个使用 Bootstrap 4 的工作示例：

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

const AppPage = () => <h1>React Router 4 & Bootstrap 4</h1>
const HomePage = () => <h1>Welcome Home !</h1>
const AboutPage = () => <h1>About Us</h1>
const OneMorePage = () => <h1>One More Page !</h1>

const PrimaryLayout = () => (
  <div>
    <nav className="navbar navbar-expand-md navbar-dark bg-dark">
      <Link className="navbar-brand" to="/">App</Link>
      <button type="button" className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarNav">
        <ul className="navbar-nav mr-auto">
          <li className="nav-item"><Link className="nav-link" to="/home">Home</Link></li>
          <li className="nav-item"><Link className="nav-link" to="/about">About</Link></li>
          <li className="nav-item"><Link className="nav-link" to="/one">More</Link></li>
        </ul>
      </div>
    </nav>
    <div className="container-fluid">
      <Switch>
        <Route path="/" exact component={AppPage} />
        <Route path="/home" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/one" component={OneMorePage} />
      </Switch>
    </div>
  </div>
)

const App = () => (
  <BrowserRouter>
    <PrimaryLayout />
  </BrowserRouter>
)

render(<App />, document.getElementById('root'))

【讨论】：

【解决方案2】：

对于这个特殊的用例，有一个简单的解决方案。

只需将其添加到您的 css 中：

.nav-link.disabled { pointer-events: none }.

也就是说，我强烈建议长期使用基于引导的反应组件库。我个人喜欢https://reactstrap.github.io/。

【讨论】：

【解决方案3】：

问题是Bootstrap 也有一个Javascript 组件，它在React 中不起作用，因为它与React's Javascript 冲突。 CSS 部分有效，这就是您所看到的。

你应该使用React-Bootstrap-https://react-bootstrap.github.io/之类的东西。这些都是Bootstrap 组件，编写为React 组件，因此您可以通过在JSX 中导入和使用它们以标准React 方式使用它们。

【讨论】：