javascript - 为什么 react 路由器中的链接标签没有显示我想要的页面？

Question

我试图通过新闻 API 获取数据，并且在 react-router 的帮助下有不同类别的新闻我想显示不同类别的新闻，链接标签正在工作，因为它正在更改本地主机 URL 但是该页面未显示特定的新闻类别。谁能帮帮我？

这是App.js，

import './App.css';
import React, { Component } from 'react'
import Navbar from './COMPONENTS/Navbar';
import News from './COMPONENTS/News';
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
export default class App extends Component {
render() {
return (
  <>
      <BrowserRouter>
    <Navbar/>
    <News category="general"/>
      <Routes>
        <Route path="/business" element={<News key="business" category="business"/>}></Route>
        <Route path="/sports" element={<News key="sports" category="sports"/>}></Route>
        <Route path="/health" element={<News key="health" category="health"/>}></Route>
        <Route path="/politics" element={<News key="politics" category="politics"/>}></Route>
      </Routes>
      </BrowserRouter>
      </>
    )
  }
}

这是VerticalNav.jsx文件，这里是所有链接，

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export default class VerticalNav extends Component {
render() {
    return (
        <>
            <nav className="navbar2">
                    <ul className="ul_list">
                        <li className="vertical_comp">
                            <Link className="avertical_comp" to="/business">Business</Link>
                        </li>
                        <li className="vertical_comp">
                            <Link className="avertical_comp" to="/sports">Sports</Link>
                        </li>
                        <li className="vertical_comp">
                            <Link className="avertical_comp" to="/health">Health</Link>
                        </li>
                        
                    </ul>
                </nav>
            </>
        )
    }
}

这是我使用 Prop 的文件，

import React, { Component } from 'react'
 import NewsItem from './NewsItem'
 import Spinner from './Spinner';
import VerticalNav from './Verticalnav';
import PropTypes from 'prop-types';
export default class News extends Component {
static defaultProps = {
   category : 'general',
 }

 static propTypes = {
  category : PropTypes.string,
 }
constructor() {
super();
this.state = {
  article: [],
  page: 1,
  loading: false,
}
 }

    async componentDidMount() {
    this.setState({
     loading: true
    })
let url = `https://newsapi.org/v2/top-headlines? country=in&category=${this.props.category}&
     apiKey=6aeca0faebbd45c1a1ec3c463f703ebb`;
   let data = await fetch(url);
    let parseData = await data.json();
   this.setState({
      article: parseData.articles,
     loading: false
    });
   }

  handleNext = async () => {
   let url = `https://newsapi.org/v2/top-headlines? 
  country=in&category=${this.props.category}&apiKey=6aeca0faebb
    d45c1a1ec3c463f703ebb&page=${this.sta 
  te.page + 1}`;
     this.setState({ loading: true });
  let data = await fetch(url);
  let parseData = await data.json();
   this.setState({
   page: this.state.page + 1,
  article: parseData.articles,
  loading: false
    })
 console.log(this.state.page);
    }
  handlePrevious = async () => {
  let url = `https://newsapi.org/v2/top-headlines? 
 country=in&category=${this.props.category}&apiKey=6aeca0faebbd45c1
  a1ec3c463f703ebb&page=${this.sta 
 te.page - 1}`;
 let data = await fetch(url);
   let parseData = await data.json();
this.setState({
  page: this.state.page - 1,
  article: parseData.articles,
  loading: false
    })
   }

  render() {
  return (
  <>
  <div className="vertical">
  <VerticalNav/>
  <div class="card1">
          <h1 className='mainheading' >THE PAHADI PRESS HEADLINES OF THE DAY</h1>
    <div class="row row1">
        {this.state.loading && <Spinner />}
          {this.state.article.map((e) => {
            return <div class="col-md-4 colu" key={e.url} >
              <NewsItem title={e.title} decription={e.description} imageUrl={e.urlToImage} 
               newsUrl={e.url}
                newsauthor={e.author} source={e.source.name} />
            </div>
          })
         }
            </div>
          </div>
        </div>
        </>
    )
  }
}

Answer 1

尝试将 general News 组件移动到 Routes 中:

return (
  <>
    <BrowserRouter>
      <Navbar />
      <Routes>
      <Route
          path='/'
          element={<News key='general' category='general' />}
        ></Route>
        <Route
          path='/business'
          element={<News key='business' category='business' />}
        ></Route>
        <Route
          path='/sports'
          element={<News key='sports' category='sports' />}
        ></Route>
        <Route
          path='/health'
          element={<News key='health' category='health' />}
        ></Route>
        <Route
          path='/politics'
          element={<News key='politics' category='politics' />}
        ></Route>
      </Routes>
    </BrowserRouter>
  </>
);