React-router <Link>与data-toggle一起使用无法正常工作

Question

我正在尝试使用React、React-Router和Bootstrap来定义基于引导页的导航栏。我像这样定义了导航栏：

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>
  );
}

我遇到的问题与<Link>的"data-toggle"相关。当我点击标签页标题时，在浏览器控制台中看到以下内容：

jquery.js:1491 Uncaught Error: Syntax error, unrecognized expression:
#/test/nounSizzle.error @ jquery.js:1491Sizzle.tokenize @
jquery.js:2108Sizzle.select @ jquery.js:2512Sizzle @    
jquery.js:888jQuery.fn.extend.find @ jquery.js:2728jQuery.fn.init @ 
jquery.js:2845jQuery @ jquery.js:73Tab.show @ bootstrap.js:2096(anonymous function) @ bootstrap.js:2169jQuery.extend.each @ 
jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136Plugin @ 
bootstrap.js:2164clickHandler @ bootstrap.js:2193jQuery.event.dispatch @ 
jquery.js:4665elemData.handle @ jquery.js:4333

我的路由设置如下:

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

当我将鼠标悬停在“Noun”标签头上时，我会看到这个URL：http://localhost:3000/#/test/noun

我正在使用浏览器历史记录。

- Mark L

---

我认为你不能这样随意地插入Bootstrap。你尝试过类似React-Bootstrap这样的东西吗？ - silvenon

我的最终“解决方案”：不再尝试路由到各个选项卡，而是使用onClick函数来tab（“show”）适当的选项卡。这样做虽然可以正常工作，但代价是无法通过URL访问选项卡面板。 - Mark L

浏览Bootstrap代码时，我发现它专门寻找<a>标签。因此，特殊的React-Router <Link>标签肯定是问题的一部分。 - Mark L

Answer 1

与其这样做，

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

我做了这件事：

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

- kevinzana

Answer 2

如此处所提到的，对我有帮助的是

1. 用 <Link> 组件包装 <li> 并
2. 给 <li> 添加 data-toggle="tab" 属性

<ul className="nav nav-pills">
   <Link to="/test/vocabulary">
      <li className="active" data-toggle="tab">Vocabulary</li>
   </Link>
   <Link to="/test/noun">
      <li data-toggle="tab">Noun</li>
   </Link>
</ul>

- Mikee