react-bootstrap compatibility

[flosse]

I'd like to combine react-bootstrap with react-nested-router.
e.g. defining a navbar looks like this:

var navbarInstance = (
    <Navbar>
      <Nav>
        <NavItem key={1} href="#">Link</NavItem>
        <NavItem key={2} href="#">Link</NavItem>
        <DropdownButton key={3} title="Dropdown">
          <MenuItem key="1">Action</MenuItem>
          <MenuItem key="2">Another action</MenuItem>
          <MenuItem key="3">Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem key="4">Separated link</MenuItem>
        </DropdownButton>
      </Nav>
    </Navbar>
  );

The problem here is that NavItem renders to an <li> element with an <a> tag. Do you have an Idea how I can tell the NavItem that it should use the Link class of react-nested-router?

[pieterv]

Hey @flosse, its not currently not possible to override the <a> component within a NavItem in react-bootstrap, but you can provide your own custom Link like behaviour, for example:

var navbarInstance = (
    <Navbar>
      <Nav>
        <NavItem key={1} href="#" onClick={Router.transitionTo.bind(null, 'link1')}>Link</NavItem>
        <NavItem key={2} href="#" onClick={Router.transitionTo.bind(null, 'link2')}>Link</NavItem>
        <DropdownButton key={3} title="Dropdown">
          <MenuItem key="1" onClick={Router.transitionTo.bind(null, 'action1')}>Action</MenuItem>
        </DropdownButton>
      </Nav>
    </Navbar>
  );

[flosse]

hmm...and how can I access the current active link? I need to set the active property.
Is there something like Router.getCurrent()?

[ryanflorence]

related #85

[flosse]

ok, here is my current hacky workaround:

module.exports = React.createClass

  isActive: (name) -> window.location.hash.indexOf('#/' + name) isnt -1

  onSelect: (id) -> Router.transitionTo.bind null, id

  render: ->
    Navbar null,
      Nav null,
        for l, key in links
          props = { key, onSelect: @onSelect(l.id), active: @isActive(l.id) }
          NavItem props, l.title

Like mentioned in #85 it would be nice to extend the API to avoid such hacks.

[stevoland]

I think react-bootstrap should support specifying a custom link class. Would you mind opening an issue there?

As a horrible hack, would something like this work temporarily?

var originalAnchor = React.DOM.a;
Router.Link.componentConstructor.prototype.render = function () {
    var props = {
            href: this.getHref(),
            className: this.getClassName(),
            onClick: this.handleClick
        };

        return originalAnchor(props, this.props.children);
};
React.DOM.a = Router.Link;

Shudder.

[flosse]

uuhh.... React.DOM.a = Router.Link; looks dangerous. What if you'd like to render a plain a element?

[stevoland]

yeah, it's totally deranged - I'm certainly not recommending it.

But <originalAnchor></originalAnchor> would work

[mjackson]

8562482 adds an ActiveState mixin that lets you mixin "active" behavior to any React component.

[professor]

For the next person who googles this, I believe the current way to do this in react-router is to use

browserHistory.push(url)

Thus the code could look like

  goToUrl: url => event => {
    event.preventDefault();
    browserHistory.push(url)
  },

<NavItem eventKey={1} href="#" onClick={this.goToUrl('/profile')}>Profile</NavItem>

[Silviu-Marian]

From NavItem.js and SafeAnchor.js:

    import { Link } from 'react-router';
    // ...
    <Nav>
        <NavItem componentClass={Link} href="/economies" to="/economies">Economies</NavItem>
        <NavItem componentClass={Link} href="/industries" to="/industries">Industries</NavItem>
    </Nav>

[taion]

Making this big so it's easier to see. The official recommendation of the maintainers of React Router and React-Bootstrap is:

Use React-Router-Bootstrap

[taion]

That componentClass={Link} trick is clever, but it won't give you the right active state, the way RRB's <LinkContainer> will.

[Silviu-Marian]

Isn't it easier to just do

    import React, { PropTypes } from 'react';
    import { Link, IndexLink } from 'react-router';
    import SafeAnchor from 'react-bootstrap/lib/SafeAnchor';

    function NavLink(props, context) {
        const { tagName, children, componentClass, href, to, active, index } = props;
        const newProps = {
            componentClass: componentClass || (index ? IndexLink : Link),
            to,
            href: href || to,
            active: active || context.router.isActive(to),
        };
        const Component = tagName || SafeAnchor;
        return (
            <Component {...newProps}>{children}</Component>
        );
    }

    NavLink.contextTypes = {
        router: PropTypes.object,
    };

    NavLink.propTypes = {
        tagName: PropTypes.any,
        children: PropTypes.node,
        componentClass: PropTypes.any,
        href: PropTypes.any,
        to: PropTypes.any,
        active: PropTypes.bool,
        index: PropTypes.bool,
    };

    export default NavLink;