React-router not working with data-toggle

Question

I am trying to use React, React-Router, and bootstrap to define a pill-based navigation bar. I define the nav bar like this:

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

The problem I'm having is with the "data-toggle" aspect of the <Link>. When I click on the pill header, I see this in the browser console:

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

My routes are setup like this:

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

When I hover the mouse over the "Noun" pill header, I see this URL: http://localhost:3000/#/test/noun

I am using browserHistory.

I don't think you can plug in Bootstrap just like that. Have you tried something like [React-Bootstrap](https://react-bootstrap.github.io/)? — silvenon, Mar 20 '16 at 23:00
My eventual "solution": instead of trying to route to the individual tabs, I instead used an onClick function to tab("show") the appropriate tab. This works fine, at the cost of not being able to access the tab panes through URLs. — Mark L, Mar 29 '16 at 01:21
Looking through the bootstrap code, I discovered that it specifically looks for tags. So the special React-Router tags are definitely part of the problem. — Mark L, Mar 29 '16 at 01:29

score 4 · Answer 1 · answered Sep 18 '18 at 06:51

4

Instead of doing

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

I did this:

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

answered Sep 18 '18 at 06:51

kevinzana

49
2

Mikee · Answer 2 · 2023-05-24T18:05:11.543

0

As mentioned here and what helped me is

wrapping the <li> with the <Link> component and
adding the data-toggle="tab" attribute to the <li>

<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>

edited May 24 '23 at 18:05

answered May 24 '23 at 18:01

Mikee

1
1
4

React-router not working with data-toggle

2 Answers2