Integration between React Starter Kit and React Router Bootstrap

Question

I am a bit new to the world of ReactJS but I have been coding in Javascript for a while now. Loving what ReactJS is doing as I was coding in pure JS before using Design Patterns and OOP I consider this a HUGE upgrade for me.

A while ago I started using react-starter-kit from kriasoft. Also I integrated react-bootstrap to this project to make my life a bit easier. I followed the tutorial from react-bootstrap and I successfully added Bootstrap.

The problem is now I cannot use the build in <Link /> from react-starter-kit which I liked a lot because of its simplicity and "power".

The official approach from react-bootstrap is to install react-router-bootstrap and replace <Link to="/path"> with <LinkContainer to="/path"> but that means that I have to replace react-routing and universal-route with react-router, and this is something I would like to avoid.

What is the right way to integrate react-bootstrap with react-starter-kit and still be able to use universal-routing? What changes should I make in order to make LinkContainer behave as Link component does?

When using Link component from react-starter-kit a get this kind of error Warning: validateDOMNesting(...): cannot appear as a descendant of . See Header > NavItem > SafeAnchor > a > ... > Link > a. Related link for this issue . (React-Bootstrap link item in a navitem)

The official recommendation from react-bootstrap, and react-router. (https://github.com/ReactTraining/react-router/issues/83#issuecomment-214794477)

Also as I said I am a bit new to reactJS and there is the possibility I am missing something. Would be nice if someone could clarify the difference between Link component from react-starter-kit and Link from react-router. Thanks in advance

Related Links are here : stackoverflow.com/questions/35687353/… github.com/ReactTraining/react-router/issues/83 — Paschalidis Christos

Paschalidis Christos Paschalidis Christos · Accepted Answer · 2016-11-24T10:18:57

I start using my own NavItem component instead of original:

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 is the approach I follow for now thanks to this post.

Integration between React Starter Kit and React Router Bootstrap

1 Answers