CODEWITHSUNDEEP
javascriptreactjs
Nadeem Khan
Nadeem Khan

Reputation: 171

React Component is not called from bootstrap tab?

This is my react component. I create a bootstrab tab view and calling the component. But any of my component is not render

import React, { Component } from 'react';
import Ndtv from './ndtv';
import Republic from './republic';
import Zeenews from './Zeenews';
import {Link,Route} from 'react-router-dom';
class NewsListView extends Component {
    render() {
    return (
      <div>
        <h1>News</h1>
        <ul className="nav nav-tabs">
            <li><Link data-toggle="tab" to="/ndtv-news">Ndtv</Link></li>
            <li><Link data-toggle="tab" to="/republic-news">Republic</Link></li>
            <li><Link data-toggle="tab" to="/zeenews-news">Zee News</Link></li>
          </ul>
          <div>
            <div className="tab-content">
              <Route exact path="/ndtv-news" component={Ndtv} />
              <Route exact path="/republic-news" component={Republic} />
              <Route exact path="/zeenews-news" component={ Zeenews } />
            </div>
          </div>

      </div>
    )
  }
}

export default NewsListView;

When I click on any of the tab I am getting following

unrecognised expression unrecognized expression: /republic-news.

Upvotes: 0

Views: 45

Answers (1)

Al Amin
Al Amin

Reputation: 949

You have to wrap your routing components with BrowserRouter as mentioned here. . Also remove data-toggle.

Upvotes: 1

Related Questions