React Starter Kit 和 React Router Bootstrap 之间的集成答案

【问题标题】：Integration between React Starter Kit and React Router BootstrapReact Starter Kit 和 React Router Bootstrap 之间的集成
【发布时间】：2017-04-06 15:25:10
【问题描述】：

我对 ReactJS 的世界有点陌生，但我已经用 Javascript 编码有一段时间了。喜欢 ReactJS 所做的事情，因为我在使用设计模式和 OOP 之前使用纯 JS 进行编码，我认为这对我来说是一个巨大的升级。

不久前我开始使用react-starter-kit from kriasoft。我还将react-bootstrap 集成到这个项目中，让我的生活更轻松一些。我按照 react-bootstrap 的教程操作，成功添加了 Bootstrap。

现在的问题是我无法使用 react-starter-kit 中的 <Link /> 中的构建，我非常喜欢它，因为它简单且“强大”。

react-bootstrap 的官方方法是安装react-router-bootstrap 并将<Link to="/path"> 替换为<LinkContainer to="/path"> 但这意味着我必须用react-router 替换react-routing 和universal-route，这是我的想避免。

将 react-bootstrap 与 react-starter-kit 集成并仍然能够使用通用路由的正确方法是什么？为了使LinkContainer 的行为与Link 组件一样，我应该进行哪些更改？

使用 react-starter-kit 中的 Link 组件时会出现这种错误警告：validateDOMNesting(...): 不能作为 .请参阅标题 > NavItem > SafeAnchor > a > ... > 链接 > a。此问题的相关链接。 (React-Bootstrap link item in a navitem)

来自 react-bootstrap 和 react-router 的官方推荐。 (https://github.com/ReactTraining/react-router/issues/83#issuecomment-214794477)

正如我所说，我对 reactJS 有点陌生，我可能会遗漏一些东西。如果有人能澄清Link component from react-starter-kit 之间的区别，那就太好了和Link from react-router。在此先感谢

【问题讨论】：

相关链接在这里：stackoverflow.com/questions/35687353/…github.com/ReactTraining/react-router/issues/83

标签： user-interface reactjs react-router react-bootstrap

【解决方案1】：

我开始使用我自己的 NavItem 组件而不是原来的组件：

import React, { PropTypes } from 'react';
import cx from 'classnames';
import Link from '../Link';

class NavItem extends React.Component {
  static propTypes = {
    className: PropTypes.string,
    href: PropTypes.string.isRequired,
    active: PropTypes.bool,
    disabled: PropTypes.bool,
    children: PropTypes.node.isRequired,
    onClick: PropTypes.func,
  };

  static defaultProps = {
    active: false,
    disabled: false,
  };

  render() {
    const { className, href, active, disabled, children, onClick } = this.props;
    return (
      <li role="presentation" className={cx(className, { active, disabled })}>
        <Link to={href} onClick={onClick}>
          {children}
        </Link>
      </li>
    );
  }
}

export default NavItem;

感谢this post，这是我现在遵循的方法。

【讨论】：