React Router v4

[corydeppen]

While I understand it isn't stable yet, I was curious if there have been any discussions whether and when v4 of the Router would be supported.

A simple example like the following results in an error with the message router.isActive is not a function in ReactRouterBootstrap.js.

<LinkContainer to="/about">
  <NavItem eventKey={1}>About</NavItem>
</LinkContainer>

[taion]

I'm pretty sure the v4 link supports equivalent functionality out-of-the-box.

[corydeppen]

This is the pen I used to test this. I haven't seen this work with v4 yet, though I could be doing something wrong in this simple example.

[jquense]

does look like the API changed, no router.isActive

[jquense]

https://github.com/ReactTraining/react-router/blob/v4/modules/Link.js#L136-L147

[taion]

Yeah but if you look at https://github.com/ReactTraining/react-router/blob/000c5eaf7953a422209b5faf17794e58e69e209f/modules/Link.js#L81-L89 – do we need to do anything here?

[giodamelio]

In the mean time I came up with this. It's pretty basic and it doesn't support query strings, but it works.

import React, { PropTypes } from 'react';
import { Link } from 'react-router';

function RouterLink({ to, children, activeOnlyWhenExact }) {
  return (
    <Link to={to} activeOnlyWhenExact={activeOnlyWhenExact}>
      {({ isActive, onClick, href }) =>
        <li className={isActive ? 'active' : ''}>
          <a href={href} onClick={onClick}>
            {children}
          </a>
        </li>
      }
    </Link>
  );
}

RouterLink.propTypes = {
  to: PropTypes.string.isReqired,
  children: PropTypes.object.isRequired,
  activeOnlyWhenExact: PropTypes.boolean,
};

export default RouterLink;

Then you can use it like this

<Nav>
  <RouterLink to="/" activeOnlyWhenExact>Home</RouterLink>
  <RouterLink to="/test">Test</RouterLink>
</Nav>

[Guigoz]

Hello.
Thank you for your work on react router bootstrap!

Do you have any news on this issue?

[mmahalwy]

@giodamelio your propTypes are wrong with spelling mistakes. Should be:

{
  to: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  activeOnlyWhenExact: PropTypes.bool,
}

[csillag]

@taion the code you referenced earlier (in the Link component) has been removed since that.
So right now I'm not sure how to provide this functionality. Can we reopen this issue?

[mmahalwy]

@csillag see @giodamelio's way of doing it. Works for me but I changed it up a little:

import React, { PropTypes } from 'react';
import Link from 'react-router/Link';

const LinkContainer = ({ to, children, activeOnlyWhenExact }) => (
  <Link to={to} activeOnlyWhenExact={activeOnlyWhenExact}>
    {({ onClick, href }) =>
      React.cloneElement(children, {
        onClick,
        href
      })
    }
  </Link>
);

LinkContainer.propTypes = {
  to: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  activeOnlyWhenExact: PropTypes.bool,
};

export default LinkContainer;

[v12]

@giodamelio @mmahalwy thanks for sharing your solution! The only thing you need to make sure it works properly with collapsible Navbar is to pass rest props of root element down to the children that is being wrapped (particularly, we are interested in onSelect, however, to make sure that everything else works, if there are any changes, we pass all of them down).

In essence, the whole react-router-bootstrap is replicated by the following code:

import React, { cloneElement, PropTypes } from 'react'
import { Link } from 'react-router'

export const LinkContainer = ({
  to,
  activeStyle,
  activeClassName,
  activeOnlyWhenExact = false,
  children,
  ...props
}) => <Link {...{ to, activeStyle, activeClassName, activeOnlyWhenExact }}>
  {
    ({ isActive: active, onClick, href }) =>
      cloneElement(
        React.Children.only(children),
        { onClick, href, active, ...props }
      )
  }
</Link>
LinkContainer.propTypes = {
  children: PropTypes.element.isRequired,
  to: PropTypes.string.isRequired,
  activeStyle: PropTypes.object,
  activeClassName: PropTypes.string,
  activeOnlyWhenExact: PropTypes.bool
}

export const IndexLinkContainer = (props) =>
  <LinkContainer {...props} activeOnlyWhenExact={true} />
IndexLinkContainer.propTypes = LinkContainer.propTypes

[xuefengwang]

Is this resolved? I'm facing same problem when integrating with react-router v4 and the code provided above doesn't work for me. Here is my code based on solution by @v12

import React, {Component} from 'react';
import {BrowserRouter, Match, Link} from 'react-router';
import {LinkContainer} from './LinkContainer';
import {Nav, Navbar} from 'react-bootstrap';
import './App.css';

const Download = () =>
  <div>Download</div>;

const Order = () =>
  <div>Order</div>;

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <div>
          <Nav>
            <LinkContainer to="/download">Download</LinkContainer>
            <LinkContainer to="/order">Order</LinkContainer>
          </Nav>
          <Match pattern="/download" component={Download}/>
          <Match pattern="/order" component={Order}/>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

[taion]

It's a constant moving target. I don't think there's much we can do at this point.