twitter-bootstrap – React-router不使用数据切换

2024年1月10日 272次阅读

我正在尝试使用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>的“数据切换”方面.当我点击药丸标题时,我在浏览器控制台中看到了这个：

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

我正在使用browserHistory.

最佳答案 而不是做

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

我这样做了：

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