Twitter bootstrap 反应路由器<；链接>；不使用数据切换

我试图使用React、React Router和bootstrap来定义一个基于pill的导航栏。我对导航栏的定义如下：

render: function() {
  return (
    <div className="container-fluid">
      <ul className="nav nav-pills">
        <li className="active"><Link data-toggle="tab" to="/test/vocabulary">Vocabulary</Link></li>
        <li><Link data-toggle="tab" to="/test/noun">Noun</Link></li>
      </ul>
      <div className="tab-content">
        <div id="vocabulary" className="tab-pane fade in active">
          <TestVocabularyView/>
        </div>
        <div id="noun" className="tab-pane fade">
          <TestNounView/>
        </div>
      </div>
    </div>
  );
}

<Route path="test" component={TestView}>
  <Route path="vocabulary" component={TestVocabularyView}/>
  <Route path="noun" component={TestNounView}/>
</Route>

我的路线设置如下：

render: function() {
  return (
    <div className="container-fluid">
      <ul className="nav nav-pills">
        <li className="active"><Link data-toggle="tab" to="/test/vocabulary">Vocabulary</Link></li>
        <li><Link data-toggle="tab" to="/test/noun">Noun</Link></li>
      </ul>
      <div className="tab-content">
        <div id="vocabulary" className="tab-pane fade in active">
          <TestVocabularyView/>
        </div>
        <div id="noun" className="tab-pane fade">
          <TestNounView/>
        </div>
      </div>
    </div>
  );
}

<Route path="test" component={TestView}>
  <Route path="vocabulary" component={TestVocabularyView}/>
  <Route path="noun" component={TestNounView}/>
</Route>

当我将鼠标悬停在“Non”pill标题上时，我看到以下URL:

http://localhost:3000/#/test/noun

我正在使用browserHistory。

而不是doing

<li><Link data-toggle="tab" to="/test/noun">Noun</Link></li>

名词

我这样做：

<li data-toggle="tab"><Link to="/test/noun">Noun</Link></li>

名词

我认为您不能像那样插入引导程序。您是否尝试过类似于？我最终的“解决方案”：我没有尝试路由到各个选项卡，而是使用onClick函数来选项卡（“显示”）相应的选项卡。这很好，但代价是无法通过URL访问选项卡窗格。查看引导代码，我发现它专门查找标记。因此，特殊的路由器标签肯定是问题的一部分。