react-bootstrap / react-router-bootstrap

Integration between React Router and React-Bootstrap

react-router-bootstrap

Integration between React Router v6 and React Bootstrap.

Installation

For React Router v6:

npm install -S react-router-bootstrap

For React Router v4 or v5 (see rr-v4 branch):

npm install -S react-router-bootstrap@rr-v4

For React Router v3 or lower (see rr-v3 branch):

npm install -S react-router-bootstrap@rr-v3

Usage

Wrap your React Bootstrap element in a <LinkContainer> to make it behave like a React Router <Link>

<LinkContainer> accepts same parameters as React Router's <NavLink>

Example

Following plain React Bootstrap component

<Button href="/foo/bar">Foo</Button>

becomes

import { LinkContainer } from 'react-router-bootstrap'
<LinkContainer to="/foo/bar">
  <Button>Foo</Button>
</LinkContainer>

Contributing

See CONTRIBUTING.

react-router-bootstrap's Issues

Support for tabs

Any support for tabs?

http://react-bootstrap.github.io/components.html#tabs

Doesn't work with latest react-router beta?

I get the following when I'm trying to install react-router-bootstrap:

npm WARN package.json [email protected] No README data
npm WARN peerDependencies The peer dependency react-router@>=0.13.1 included from react-router-bootstrap will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/Users/danny/.node/bin/npm" "install" "react-router-bootstrap" "--save"
npm ERR! node v0.10.28
npm ERR! npm  v2.9.1
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package react-router does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-router@>=0.13.1

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/danny/src/bpii-next/npm-debug.log

This is my package.json requirement:
"react-router": "v1.0.0-beta3"

Add support for ListGroupItem

Feature request:

ListGroupItem has a "href" attribute and it would be great to have this same functionality with these items (so a ListGroupItemLink component).

MenuItemLink inside DropDownButton on Navbar

In my navbar I have a dropdown button with options, however, when I click on a MenuItemLink on the dropdown, the route works as expected, but the dropdown is still visible even after the route changes. Here's my code:

        <Navbar ref="header" className="navbar navbar-inverse" brand={brand} fixedTop={true} fluid={true} toggleNavKey={1}>
          <Nav className="navbar-left" eventKey={1}>
            <NavItemLink to="dashboard" eventKey={2}>Dashboard</NavItemLink>
            <DropdownButton eventKey={3} title="Admin">
              <MenuItemLink to="users" eventKey={4}>Users</MenuItemLink>
              <MenuItemLink to="projects" eventKey={5}>Projects</MenuItemLink>
            </DropdownButton>
          </Nav>
        </Navbar>

What is this project about?

According to my understanding Bootstrap is a UI component and Router is a purely logic component. How are they related?

Update with react-bootstrap 0.15

With the update of react-bootrstrap 0.15 (react-bootstrap/react-bootstrap@0193046)

We need to changes the includes from react-bootrstrap/Comp to react-bootstrap/lib/Comp

I can do a PR but I guess, this is the kind of thing that could be done with a simultaneous release!

Reflect react-bootstrap's travis settings

With react-bootstrap/react-bootstrap#715 we test against iojs only. Perhaps we should consider doing the same?

Address remaining eslint warnings

#73 (comment)

Nav must have onSelect in order to prevent page transition

The following setup w/o onSelect handler will not work -- it will make the actual page transition (not handled by router) when NavItem is clicked...

                    <Nav bsStyle='pills' onSelect={()=>{}} justified>
                        <NavItemLink to="country" disabled>Country</NavItemLink>
                    </Nav>

Using NavItemLink in Navbar brand

I have this working with react-bootstrap, but am having trouble getting it to look right in the Navbar brand property. I saw an example in the react-bootstrap issues here, for how they would set the brand. I tried using that example, but change Link to NavItemLink, but I end up with a bullet beside the brand name when using it.

Has anyone been able to use the NavItemLink for the brand?

Why not use ~ instead of ^ in package.json?

Isn't ^ a little too all inclusive?

MenuItemLink requires 'react/addons'

this is generally considered bad practice for libraries, and can result in React being loaded multiple times in some scenarios.

LinkMixin, OTOH, does it "right" by requiring 'react/lib/cx' et cetera.

bower.json is out of sync

The bower.json file has the wrong version ("0.8.3") and still lists dependencies as:

  "dependencies": {
    "react-router": "^0.11.6",
    "react-bootstrap": "^0.13.2"
  }

Specifically these conflict with the most recent versions of those packages, while the dependency versions specified in package.json don't.

Invalid context `router` of type `object` supplied to `NavBar`, expected `function`.

Am I missing something. I get this set of warnings all the time:

[1] Warning: Failed Context Types: Invalid context `router` of type `object` supplied to `NavBar`, expected `function`. Check the render method of `App`.
[1] Warning: Failed Context Types: Invalid context `router` of type `object` supplied to `NavItemLink`, expected `function`. Check the render method of `NavBar`.
[1] Warning: Failed Context Types: Invalid context `router` of type `object` supplied to `NavItemLink`, expected `function`. Check the render method of `NavBar`.
[1] Warning: Failed Context Types: Invalid context `router` of type `object` supplied to `NavItemLink`, expected `function`. Check the render method of `NavBar`.
[1] Warning: Failed Context Types: Invalid context `router` of type `object` supplied to `NavBar`, expected `function`. Check the render method of `App`.
[1] Warning: Failed Context Types: Invalid context `router` of type `object` supplied to `NavItemLink`, expected `function`. Check the render method of `NavBar`.
[1] Warning: Failed Context Types: Invalid context `router` of type `object` supplied to `NavItemLink`, expected `function`. Check the render method of `NavBar`.
[1] Warning: Failed Context Types: Invalid context `router` of type `object` supplied to `NavItemLink`, expected `function`. Check the render method of `NavBar`.

npm run visual-test - does nothing

It just shows the files in folders

Issue when including as vendor in webpack

I'm having an issue including react-router-bootstrap in my vendors.js output of my webpack.config.js.

My config looks like this:

var Webpack = require('webpack');
var VENDOR_PATH = __dirname + '/node_modules';
var CommonsChunkPlugin = Webpack.optimize.CommonsChunkPlugin;

var config = {
    /* for vendors (and other modules) we have a CDN for */
    addExternal: function (name, globalVar) {
        this.externals[name] = globalVar;
        this.entry.vendors.push(name);
    },

    /* for vendors we don't have a CDN for */
    addVendor: function (name, path) {
        this.resolve.alias[name] = path;
        this.entry.vendors.push(name);
    },

    addPlugin: function (plugin) {
        this.plugins.push(plugin);
    },

    entry: {
        app: [ './src/main.js' ],
        vendors: [],
    },

    plugins: [],

    externals: { },

    output: {
        path: __dirname + '/public/dist',
        filename: 'bundle.js'
    },

    resolve: {
        alias: { },
        extensions: [ '', '.js', '.jsx' ]
    },

    module: {
        noParse: [],
        loaders: [
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader', exclude: /node_modules/ },
            { test: /\.jsx?$/, loader: 'babel-loader?stage=0', exclude: /node_modules/ },
        ]
    }
};

config.addExternal('jquery', 'jQuery');
config.addExternal('react', 'React');

config.addVendor('react-router', VENDOR_PATH + '/react-router/umd/ReactRouter.js')
config.addVendor('react-bootstrap', VENDOR_PATH + '/react-bootstrap/dist/react-bootstrap.js');
config.addVendor('react-router-bootstrap', VENDOR_PATH + '/react-router-bootstrap/lib/index.js');

config.addPlugin(new CommonsChunkPlugin('vendors', 'vendors.js'));

module.exports = config;

The error I'm getting is caused by lines like this:

var Button = require('react-bootstrap/lib/Button');

Error:

ERROR in ./~/react-router-bootstrap/lib/ButtonLink.js
Module not found: Error: Cannot resolve 'file' or 'directory' c:\[...]\project/node_modules/reactbootstrap/dist/react-bootstrap.js/lib/Button in c:\[...]\project\node_modules\react-router-bootstrap\lib
 @ ./~/react-router-bootstrap/lib/ButtonLink.js 3:13-50

Changing the line to this fixes it:

var Button = require('react-bootstrap').Button;

I'm new to javascript development so I don't know if this is the proper fix/workaround or if I'm even setting up my webpack project correctly.

Thoughts?

Get rid of RouterOverlayTrigger and RouterModalTrigger

Per react-bootstrap/react-bootstrap#811 (comment)

These won't actually be needed for React v0.14.

Automate release process

• Bower Need to create a new repo for the bower release, similar to what we are doing in react-bootstrap today. The goal being to stop committing compiled code to the repo.
• Changelog generation
• Remove lib/ folder from this repo

It may make sense to extract some of the tooling in react-bootstrap to a separate repo for this.

MenuItemLink doesn't receive active class

in the same code, if I use MenuLink 'active' is added for the current route link, but with MenuItemLink it does not. Thanks!

The package react-bootstrap does not satisfy its siblings' peerDependencies requirements!

$ npm install --save react-router-bootstrap
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "c:\Program Files\iojs\node.exe" "c:\Program Files\iojs\node_modules\npm\bin\npm-cli.js" "install" "--save" "react-router-bootstrap"
npm ERR! node v1.2.0
npm ERR! npm v2.5.1
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package react-bootstrap does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-bootstrap@>=0.22.4

very nice of you

Implement eslint linting

As a start point these are the lines from the old (long unused) code:

jshint: {
  enforceall: true,
  // jsx splat will make this fail
  eqnull: true,
  camelcase: false,
  nocomma: false,
  browser: true,
  singleGroups: false,
  emitErrors: true,
  failOnHint: true
}

react-bootstrap 0.12

Is there anything preventing this from supporting react-bootstrap 0.12 as a peer dependency?

Thank you!

Bower package of React-Bootstrap has been moved to separate repo which makes AMD paths unusable

AMD paths in build:

define(["react", "react-bootstrap/lib/Button", "react-bootstrap/lib/ListGroupItem", "react-bootstrap/lib/MenuItem", "react-bootstrap/lib/NavItem"], factory);

Should now be:

define(["react", "react-bootstrap/Button", "react-bootstrap/ListGroupItem", "react-bootstrap/MenuItem", "react-bootstrap/NavItem"], factory);

(without /lib/)

To do that in webpack.config.js sections like

amd: "react-bootstrap/lib/Button"

Should now be

amd: "react-bootstrap/Button"

Use methods from react-router Link component in LinkMixin

Should directly copy methods from Link.prototype and static objects from Link to remove code duplication. Need to remember to add back support for disabled prop.

Add OverlayTriggerWithRouterContext and ModalTriggerWithRouterContext

Add these as convenience aliases for forwarding router context now that react-bootstrap/react-bootstrap#465 has been merged.

Suggestions for better names are very welcome.

Nested routing

Should nested routing work between pages? I've got code like this:

var React = require('react'), Router = require('react-router');
var ReactRouterBootstrap = require('react-router-bootstrap')
var RouteHandler = Router.RouteHandler, Route = Router.Route;

var ReactBootstrap = require('react-bootstrap');
var MyLink = ReactRouterBootstrap.ButtonLink;

var NavBar = React.createClass({
  render: function(){
    return (
      <div>
      <nav id="navbar">
      <ul id="nav-pages">
      <MyLink to="/">Home</MyLink>
      <MyLink to="/charts">About</MyLink>
      </ul>
      </nav>
      <RouteHandler />
      </div>
    );
  }
});

var home = React.createClass({ render: function() { return (<div>Hi</div>); } });
var charts = require('./charts.jsx');
var App = NavBar;

var routes = (
  <Route handler={App} path="/">
    <Route name="/" path="/" handler={home} />
    <Route name="charts" path="/charts" handler={charts}>
            <Route path=":chart" handler={charts}>
     </Route>
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

then charts.jsx:

var React= require('react'), ReactRouterBootstrap = require('react-router-bootstrap'), MenuItemLink = ReactRouterBootstrap.MenuItemLink;

    var ChooseChart = React.createClass({
      render: function() {
        return (
            <div>
              <MenuItemLink to="charts" chart="chart1">Chart1</MenuItemLink>
              <MenuItemLink to="charts" chart="chart2">Chart2</MenuItemLink>
            </div>
        );
      }
    });

But the MenuItemLink items are all active, and their link doesn't function.

Thanks again!

DropdownButton onSelect not fired when MenuItemLink is clicked

Noticing if you set the onSelect for the DropdownButton along with a <MenuItem> element the event is fired, however when using a <MenuItemLink> the onSelect doesn't seem to fire.

Activate items when on subroutes

Hi.

I'm using react-router and <NavItemLink key={i} eventKey={i} to={v.href} params={params} query={query}>{v.label}</NavItemLink>. When I go to the intended route e.g. #/cms/users it will highlight the Users entry (which is the value of v.href). When I go to #/cms/users/someId/anythingreally then the menu item will be deselected.

How can I select a NavItemLink's active state based on the URL/Route?

Bower module

Please, register )

I'm back =)

Hey there!

I have been into deep rabbit holes and havn't really been able to look around outside to see what has been going on.

I've seen you have updated the library and cleaned / improved it a lot, that's awesome!

I am wondering how you are handling the "reserved props" / filtering out the "non-parameters".
I was planning on removing all that checking stuff and moving to a params={{some: 'param'}} way of doing things, but it seems you find a way to make it work anyhow, now I am wondering how you did it =)

Can you point me to the relevant code?

Keep up the good work! I'll try to get involved in in proving the library further

Uncaught TypeError: Cannot read property '_mockedReactClassConstructor' of undefined

Trying to create a bare minimum app with react-router-bootstrap, running into above issue.

Full source is here:
https://github.com/okigan/react-router-bootstrap-seed

var React = require('react')

var Router = require('react-router')
    , RouteHandler = Router.RouteHandler
    , Route = Router.Route;

var ReactBootstrap = require('react-bootstrap')
    , Nav = ReactBootstrap.Nav;

var ReactRouterBootstrap = require('react-router-bootstrap')
    , Navbar = ReactRouterBootstrap.NavBar
    , NavItem = ReactRouterBootstrap.NavItem
    , DropdownButton = ReactRouterBootstrap.DropdownButton
    , NavItemLink = ReactRouterBootstrap.NavItemLink
    , MenuItem = ReactRouterBootstrap.MenuItem
    , MenuItemLink = ReactRouterBootstrap.MenuItemLink
    , ButtonLink = ReactRouterBootstrap.ButtonLink;

var App = React.createClass({
    render: function () {
        return (
            <Navbar ref="header" className="navbar navbar-inverse" fixedTop={true} fluid={true} toggleNavKey={1}>
                <Nav className="navbar-left" eventKey={1}>
                    <NavItemLink to="dashboard" eventKey={2}>Dashboard</NavItemLink>
                    <DropdownButton eventKey={3} title="Admin">
                        <MenuItemLink to="users" eventKey={4}>Users</MenuItemLink>
                        <MenuItemLink to="projects" eventKey={5}>Projects</MenuItemLink>
                    </DropdownButton>
                </Nav>
            </Navbar>

            );
    }

});

var Destination = React.createClass({
    render: function () {
        return <div>You made it!</div>;
    }
});

var routes = (
    <Route handler={App} path="/">
        <Route name="destination" path="destination/:someparam" handler={Destination} />
    </Route>
    );

Router.run(routes, function (Handler) {
    React.render(<Handler/>, document.body);
});

Switch from JSX transformer to Babel

The JSX transformer bundled with current version of react-tools is out of date and emits Object.assign when transpiling e.g. var a = {...b}. Also, Babel gives us more consistency with the main React-Bootstrap package.

Uncaught TypeError: Cannot read property 'firstChild' of undefined

When I click on normal <Link> components, routing works fine. When I click on a <MenuItemLink> configured exactly the same way, the route does change, but I see this error in the console:

Uncaught TypeError: Cannot read property 'firstChild' of undefined

RequireJS compatibility

Please use UMD wrapper in your webpack config.

output: {
  library: 'ReactRouterBootstrap',
  libraryTarget: 'umd'
},

Why does initial render has href="#" and no active class?

This ruins my SEO because Google can't crawl my site. How could I trigger to get the right href and active state?

classnames as peer dependency

Why is classnames set up as a peer dependency rather than a normal dependency? Seems like it'd be neater, and it'd be one less warning from npm about how the behavior will change in npm 3+.

Reload of page and menu item isn't highlighted according to route

If I click a link, the navbar item is correctly marked 'active' - but on a page reload/refresh it isn't

Actually - just tested what was seeing, and it isn't marked active at all - not sure why

Transfer repo to react-bootstrap organization

I have been focusing my efforts of late on react-bootstrap to fix a number of bugs there, in pursuit of a 1.0.0 release. This repo has grown much more than I had originally anticipated, and I would like to propose moving it to the react-bootstrap organization. Doing so would allow to have more collaborators to help in it's maintenance so PRs and issues are not left unattended due to lack of time on my part. In doing so, I'd like to adopt the Collaborating and Maintaining documentation as already stated in react-bootstrap.

With this change I'd like to invite the existing collaborators of this repo to be in the react-bootstrap organization to retain their current status with this project. Which includes the current collaborators:

• @vespakoen
• @idolizesc
• @dozoisch (already a member of react-bootstrap)

Are there any objections by the @react-bootstrap/collaborators team?

• @joemcbride
• @AlexKVal
• @mathieumg
• @apkiernan
• @dozoisch
• @aabenoja

If I see no objections by May 5th, 2015 14:00 GMT then I'll plan to proceed.

I will plan to retain a link in the readme at the current project's url to the transferred repo.

Deprecated RouterModalTrigger in react-bootstrap 0.24

I get an error message using the latest react-bootstrap 0.24.0 with react-router-bootstrap 0.17.2:

"[Error: Cannot find module 'react-bootstrap/lib/ModalTrigger' from '/projects/intranet/frontend/node_modules/react-router-bootstrap/lib"

It seems like ModalTrigger is gone for good as was already the case in a minor 0.23.x release before it was fixed.

active flag not dynamic

To reproduce:

• run either of the tests
• click on one of the nav item links. Notice that the 'active' class doesn't get added.
• refresh. Notice that the 'active' class is now present
• click on the other nav item link. Norice that the 'active' class does not get removed

(EDIT: bad proposed partial solution and speculation deleted)

Please add jshint to check your script.

Found global leak.

ADDITIONAL_RESERVED_PROPS is never defined.

Home route always selected?

Due to the nested nature of react-router and the fact that it always "activates" all routes that are part of the URL, I can't figure out how to place a home-link that is not always activated.

For example, I have the following routes:

export default (
  <Route path="/" name="home" handler={App}>
    <Route name="artist" handler={Artist} />
    <Route name="country" handler={Country} />
    <DefaultRoute handler={Top} />
  </Route>
);

And the following navigation:

export default class Navigation extends React.Component {
  render() {
    return (
      <Navbar brand='Brand' toggleNavKey={0}>
        <CollapsableNav eventKey={0}>
          <Nav navbar>
            <NavItemLink to='home'>Home</NavItemLink>
            <NavItemLink to='artist'>Artist</NavItemLink>
            <NavItemLink to='country'>Country</NavItemLink>
          </Nav>
        </CollapsableNav>
      </Navbar>
    );
  }
}

When I click at the Artist link, it will correctly have the active styles, but the Home link ALSO has the active styles. How can this be avoided?

NavItemLink not closing after click

Hi.
Thanks for the awesome work.
I'm trying react-router-bootstrap with react-starter right now and I noticed that NavItemLink it's not closing after I click it. I mean, it's actually working, but it's not closing.
Is it something obvious? Or do you need implementation details?
I really appreciate the help.

npm up - peerinvalid error.

$ npm up
...
npm ERR! peerinvalid The package react does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@>=0.13
npm ERR! peerinvalid Peer [email protected] wants [email protected]

Active on child route

Hi.

I have the routes:

#/cms
#/cms/users
#/cms/users/new
#/cms/users/:id
#/cms/users/:id/edit
#/cms/users/:id/destroy

I have a NavItemLink that is active on #/cms/users. How do I get it to also be active on anything below #/cms/users ?

npm install failure

This is the error that gets thrown:

> [email protected] prepublish /home/igor/Projects/react-router-bootstrap
> npm run build


> [email protected] build /home/igor/Projects/react-router-bootstrap
> babel src --out-dir=lib && webpack && COMPRESS=1 webpack && npm run bower-prepare

src/ButtonLink.js -> lib/ButtonLink.js
src/LinkMixin.js -> lib/LinkMixin.js
src/ListGroupItemLink.js -> lib/ListGroupItemLink.js
src/MenuItemLink.js -> lib/MenuItemLink.js
src/NavItemLink.js -> lib/NavItemLink.js
src/RouterOverlayTrigger.js -> lib/RouterOverlayTrigger.js
src/index.js -> lib/index.js

assert.js:89
  throw new assert.AssertionError({
        ^
AssertionError: path must be a string
    at Module.require (module.js:364:3)
    at require (module.js:384:17)
    at module.exports (/home/igor/Projects/react-router-bootstrap/node_modules/webpack/bin/convert-argv.js:61:19)
    at Object.<anonymous> (/home/igor/Projects/react-router-bootstrap/node_modules/webpack/bin/webpack.js:54:40)
    at Module._compile (module.js:430:26)
    at Object.Module._extensions..js (module.js:448:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:471:10)
    at startup (node.js:117:18)

Running npm run visual-test afterwards throws the same AssertionError.

node --version
v2.3.3
npm --version
2.11.3

Module build failed: ReferenceError: Unknown transformer u specified in optional

Alright... So, I forked + cloned this repo. Made one little adjustment (context.router in the new react-router is now an object and not a function), ran npm run build, did npm link and npm link react-router-bootstrap on my app.

Now, when I import the resulting package into my app, I get this bizarre error (regardless of whether I even use any of the components or code. Just the act of importing causes this):

[0] ../react-router-bootstrap/lib/index.js
[0] Module build failed: ReferenceError: Unknown transformer u specified in optional
[0]     at TransformerPipeline._ensureTransformerNames (/Users/danny/src/bpii-next/node_modules/babel-core/lib/babel/transformation/transformer-pipeline.js:125:15)
[0]     at transformerList (/Users/danny/src/bpii-next/node_modules/babel-core/lib/babel/transformation/file/option-parsers.js:23:19)
[0]     at File.normalizeOptions (/Users/danny/src/bpii-next/node_modules/babel-core/lib/babel/transformation/file/index.js:187:31)
[0]     at new File (/Users/danny/src/bpii-next/node_modules/babel-core/lib/babel/transformation/file/index.js:145:22)
[0]     at TransformerPipeline.transform (/Users/danny/src/bpii-next/node_modules/babel-core/lib/babel/transformation/transformer-pipeline.js:87:16)
[0]     at transpile (/Users/danny/src/bpii-next/node_modules/babel-loader/index.js:8:22)
[0]     at Object.module.exports (/Users/danny/src/bpii-next/node_modules/babel-loader/index.js:63:12)
[0]  @ ./src/components/NavBar.js 22:28-61

Without react-router-bootstrap everything looks fine and dandy. Anybody with ideas?

My app also runs webpack and babel, but doesn't crash unless I include this module.

MenuItemLink?

We have ButtonLink and NavItemLink; MenuItemLink would be nice too.

Support for newest react-router

In latest react-router i can see these warnings:
Warning: Router.State is deprecated. Please use this.context.router.isActive() instead
Warning: Router.Navigation is deprecated. Please use this.context.router.makeHref() instead

Do you any plan for migration?

DropdownButton not set to active when navitem child link is active route

If you click a link in a navbar menu the link is marked active appropriately but the drop down button is not. EX:

<DropdownButton title="Menu1" navItem>
    <MenuItemLink to="item1">item1</MenuItemLink>
    <MenuItemLink to="item2">item2</MenuItemLink>
    <MenuItemLink to="item3">item3</MenuItemLink>
</DropdownButton>

When clicking item1 it will put the active class on item1's li but not on the class for Menu1's tag.

A less than ideal (due to speed), yet functional solution is this

var DropdownButton = require('react-bootstrap').DropdownButton;

var DropdownButtonLink = React.createClass({
    mixins: [State],
    render: function(){
        var activeClass;
        React.Children.forEach(this.props.children, function(child){
            if(this.isActive(child.props.to,child.props.params,child.props.query)){
                activeClass = "active";
            }
        }, this);
        return (
            <DropdownButton {...this.props} className={activeClass}/>
        );
    }
});