React组件未在Bootstrap标签页渲染，点击标签报表达式识别错误求助

你遇到的问题根源在于Bootstrap原生标签页的JS逻辑和React Router的路由逻辑冲突了：

Bootstrap的data-toggle="tab"属性依赖jQuery来查找匹配的DOM元素（通常是通过href属性的锚点值，比如href="#republic-news"），但你这里把to属性设为了路由路径/republic-news，Bootstrap会把这个路径当成CSS选择器去查找元素，自然找不到就抛出了unrecognized expression: /republic-news的错误。同时你原来的代码也没有正确应用Bootstrap导航的样式类，且没有通过React来控制组件渲染的逻辑。

下面提供两种可行的解决方案：

方案一：结合React Router实现URL同步的标签页 #

这种方案保留路由URL和标签页的同步，适合需要通过URL直接访问特定标签内容的场景：

函数组件版本（推荐，使用React Hooks） #

import React from 'react';
import Ndtv from './ndtv';
import Republic from './republic';
import Zeenews from './Zeenews';
import { Link, Route, useLocation } from 'react-router-dom';

function NewsListView() {
  const location = useLocation();

  return (
    <div>
      <h1>News</h1>
      <ul className="nav nav-tabs">
        {/* 根据当前路由路径设置active状态 */}
        <li className={`nav-item ${location.pathname === '/ndtv-news' ? 'active' : ''}`}>
          <Link className="nav-link" to="/ndtv-news">Ndtv</Link>
        </li>
        <li className={`nav-item ${location.pathname === '/republic-news' ? 'active' : ''}`}>
          <Link className="nav-link" to="/republic-news">Republic</Link>
        </li>
        <li className={`nav-item ${location.pathname === '/zeenews-news' ? 'active' : ''}`}>
          <Link className="nav-link" to="/zeenews-news">Zee News</Link>
        </li>
      </ul>
      <div className="tab-content mt-3">
        <Route exact path="/ndtv-news" component={Ndtv} />
        <Route exact path="/republic-news" component={Republic} />
        <Route exact path="/zeenews-news" component={Zeenews} />
      </div>
    </div>
  );
}

export default NewsListView;

类组件版本（使用withRouter高阶组件） #

如果坚持使用类组件，可以通过withRouter注入路由相关属性：

import React, { Component } from 'react';
import Ndtv from './ndtv';
import Republic from './republic';
import Zeenews from './Zeenews';
import { Link, Route, withRouter } from 'react-router-dom';

class NewsListView extends Component {
  render() {
    const { location } = this.props;
    return (
      <div>
        <h1>News</h1>
        <ul className="nav nav-tabs">
          <li className={`nav-item ${location.pathname === '/ndtv-news' ? 'active' : ''}`}>
            <Link className="nav-link" to="/ndtv-news">Ndtv</Link>
          </li>
          <li className={`nav-item ${location.pathname === '/republic-news' ? 'active' : ''}`}>
            <Link className="nav-link" to="/republic-news">Republic</Link>
          </li>
          <li className={`nav-item ${location.pathname === '/zeenews-news' ? 'active' : ''}`}>
            <Link className="nav-link" to="/zeenews-news">Zee News</Link>
          </li>
        </ul>
        <div className="tab-content mt-3">
          <Route exact path="/ndtv-news" component={Ndtv} />
          <Route exact path="/republic-news" component={Republic} />
          <Route exact path="/zeenews-news" component={Zeenews} />
        </div>
      </div>
    )
  }
}

export default withRouter(NewsListView);

方案二：纯React状态控制的标签页（无需路由） #

如果不需要URL和标签页同步，仅用React内部状态控制组件切换即可：

import React, { Component } from 'react';
import Ndtv from './ndtv';
import Republic from './republic';
import Zeenews from './Zeenews';

class NewsListView extends Component {
  state = {
    activeTab: 'ndtv' // 默认激活的标签
  };

  handleTabSwitch = (tabName) => {
    this.setState({ activeTab: tabName });
  };

  render() {
    const { activeTab } = this.state;
    return (
      <div>
        <h1>News</h1>
        <ul className="nav nav-tabs">
          <li className={`nav-item ${activeTab === 'ndtv' ? 'active' : ''}`}>
            <button 
              className="nav-link" 
              onClick={() => this.handleTabSwitch('ndtv')}
            >
              Ndtv
            </button>
          </li>
          <li className={`nav-item ${activeTab === 'republic' ? 'active' : ''}`}>
            <button 
              className="nav-link" 
              onClick={() => this.handleTabSwitch('republic')}
            >
              Republic
            </button>
          </li>
          <li className={`nav-item ${activeTab === 'zeenews' ? 'active' : ''}`}>
            <button 
              className="nav-link" 
              onClick={() => this.handleTabSwitch('zeenews')}
            >
              Zee News
            </button>
          </li>
        </ul>
        <div className="tab-content mt-3">
          {/* 根据状态渲染对应组件 */}
          {activeTab === 'ndtv' && <Ndtv />}
          {activeTab === 'republic' && <Republic />}
          {activeTab === 'zeenews' && <Zeenews />}
        </div>
      </div>
    )
  }
}

export default NewsListView;

内容的提问来源于stack exchange，提问作者Nadeem Khan