twitter-bootstrap – React-router不使用数据切换
发布时间:2020-12-17 21:24:38 所属栏目:安全 来源:网络整理
导读:我正在尝试使用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/vocabul
我正在尝试使用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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |